/* Ok until 1366px
-------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {

	/* Fonts
	-----------------------------*/
		h2 {
		    font-size: 54px;
		}
		p {
		    font-size: 16px;
		}
		#hyper4_obj ul li {
			font-size: 16px;
		}
	/* Header
	-----------------------------*/
		.landing-img {
		    right: 0;
		}
		.landing-img img {
		    height: 85vh;
		}
		.landing-content h1 {
		    font-size: 26px;
		}
		.landing-logo img {
		    max-width: 40vw;
		}
		.landing-description p {
		    font-size: 18px;
		}
		.landing-logo {
		    margin: 1.5em 0 2em 0;
		}
		.landing-buttons {
		    margin-top: 1.5em;
		}
		.landing-header {
		    height: 85vh;
		}
		.circle-img {
		    zoom: 0.8;
		}
		.landing-buttons .btn {
		    font-size: 12px;
		    padding: 1.3em 2em;
		}

	/* Booking
	-----------------------------*/
		#booking-grid .cell:first-child .cell-container-inner {
		    margin-right: 1em;
		}
		#booking-grid .cell:last-child .cell-container-inner {
		    margin-left: 1em;
		}
		#booking-grid .performance-table .col-price {
		    width: 150px;
		}

	/* Review
	-----------------------------*/
		.review-container-inner {
		    margin: 5em 3em;
		}
}



/* Ok until 1280px
-------------------------------------------------------------------------*/
@media screen and (max-width: 1365px) {
   .landing-content-inner {
	    max-width: 55%;
	}
	.stripe-container .text-container {
		padding-left: 4em;
		padding-right: 4em;
	}
}

/* Fix header btns
-------------------------------------------------------------------------*/
@media screen and (max-width: 1215px) {

	.landing-content .landing-buttons .btn {
	    min-width: unset !important;
	}

}

/* Ok until 1024px
-------------------------------------------------------------------------*/
@media screen and (max-width: 1125px) {
	#mobile-menu .fw > div > .menu {
	    padding-top: 66px;
	}
	/* Fonts
	-----------------------------*/
		h2 {
		    font-size: 48px;
		}
		h3 {
		    font-size: 15px;
		}
	/* General
	-----------------------------*/
	.separator {
		width: 100%;
		padding: 0 32px;
	}
	.stripe-container .text-container {
		padding-left: 3em;
		padding-right: 3em;
	}
	/* Header
	-----------------------------*/
	.landing-header {
	    height: 91.2vh;
	}
	.landing-img img {
	    height: 91.2vh;
	}
	.landing-img {
	    right: -10vw;
	}
	#page {
	    padding-top: 68px;
	}
	.circle-img {
	    zoom: 0.65;
	}
	.landing-buttons .btn {
	    font-size: 11px;
	}
	/* Page
	-----------------------------*/
	body .cell.img-cell {
	    height: 500px;
	}
	#hyper4_how .cell {
	    width: 60%;
	}
	#booking-grid .cell {
	    width: 100%;
	}
	#booking-grid .cell-content {
	    min-height: unset;
	}
	#booking-grid .cell .cell-container-inner {
	    margin: 0 !important;
	}
	#booking-grid .cell:first-child {
	    margin-bottom: 2em;
	}

	.review-container-inner {
	    margin: 3em 2em;
	}
	.avatar {
	    width: 60px;
	    height: 60px;
	}
	.name p {
	    transform: none;
	}
	.review-content p {
	    font-size: 14px;
	}
	#hyper4_reviews:after, #hyper4_reviews:before {
	    zoom: 0.7;
	}
	#contact-table input, 
	#contact-table textarea, 
	#contact-table select, 
	#commentform input, 
	#commentform textarea,
	::placeholder,
	.acceptance-box * {
	    font-size: 14px !important;
	}
}

/* On until 768px
-------------------------------------------------------------------------*/
@media screen and (max-width: 1023px) {

	/* General
	-----------------------------*/
		#page {
		    padding-top: 62px;
		}
		#mobile-menu .fw > div > .menu {
		    padding-top: 60px;
		}
		h2 {
		    font-size: 36px;
		}
		p {
		    font-size: 14px;
		}
		a.btn.big-btn {
		    min-width: 180px !important;
		    font-size: 10px;
		}

	/* Header
	-----------------------------*/
		.landing-img img {
		    height: 50vh;
		}
		.landing-header {
		    height: 50vh;
		    background: linear-gradient(85deg, #dfdfdf 0%, rgba(255,255,255,1) 70%);
		}
		.circle-img {
		    zoom: 0.5;
		}
		.landing-content-inner {
		    max-width: 60%;
		}
		.landing-content h1 {
		    font-size: 22px;
		}
		.landing-logo img {
		    max-width: 250px;
		}
		.landing-logo {
		    margin: 1em 0 1.5em 0;
		}
		.landing-description p {
		    font-size: 15px;
		}
		.landing-buttons .btn {
		    font-size: 10px;
		    padding: 1.3em;
		}

	/* Objectives
	-----------------------------*/
		body .cell.img-cell {
		    width: 100%;
		    height: 350px;
		    margin-bottom: 2em;
		}
		#hyper4_obj [class*='grid'] {
		    margin-bottom: 4em;
		}
		#hyper4_obj ul li {
		    font-size: 14px;
		}
		#hyper4_obj ul li::before {
		    font-size: 14px;
		}
		#hyper4_obj h2 {
		    font-size: 32px;
		    margin-bottom: 0.5em;
		}
		#hyper4_obj .red-divider {
		    margin-bottom: 1.5em;
		}

	/* How
	-----------------------------*/
		#hyper4_how .header-top {
		    padding: 18px 25px !important;
		}
		#hyper4_how .stripe-description {
		    margin-top: 2em;
		}
		#hyper4_how {
		    height: 100vh;
		}

	/* Book
	-----------------------------*/
		#hyper4_book .img-cell {
		    display: flex;
		    order: 2;
		    justify-content: flex-end;
		    margin-top: -10em;
		    width: 100%;
		    right: 0;
		}
		#hyper4_book .text-cell {
		    margin-top: 0;
		}
		#hyper4_book .d-flex-nw {
		    flex-flow: wrap;
		}
		#booking-grid {
		    padding-bottom: 0;
		}
		#hyper4_reviews h2 {
		    max-width: 62%;
		    margin: auto;
		}
}

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

	/* Header
	-----------------------------*/
		.landing-header {
		    height: 91.5vh;
		}
		.landing-content-inner {
		    max-width: 100%;
		}
		.landing-img img {
		    height: auto;
		    width: 450px;
		}
		.landing-img {
		    bottom: 0;
		}
		#header-content:after {
		    content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background: #000;
		    z-index: 2;
		    opacity: 0.5;
		}
		.landing-content * {
		    color: #fff !important;
		    text-align: center;
		}
		.landing-content {
		    padding: 1em;
		}
		.landing-logo img {
		    filter: brightness(2.5);
		}
		.landing-buttons .btn {
		    margin: 0 !important;
		    width: 250px !important;
		}
		.landing-buttons .btn:first-child {
		    margin-bottom: 1.5em !important;
		}
		.sm-circle {
		    left: -20%;
		    bottom: 5%;
		    left: -30%;
		    bottom: 2%;
		}
		.bg-circle {
		    left: 5%;
		    width: 800px;
		    height: 800px;
		    top: -2%;
		}


	/* Intro
	-----------------------------*/
		.stripe-container .text-container {
		    padding: 0;
		}


	/* Objectives
	-----------------------------*/
		body .cell.img-cell {
		    height: 275px;
		    margin-bottom: 1em;
		}

		#hyper4_obj [class*='grid'] {
		    margin-bottom: 2.5em;
		}

		#hyper4_obj h2 {
		    font-size: 30px;
		    margin-bottom: 10px;
		}


	/* How
	-----------------------------*/
		#hyper4_how .header-top {
		    width: 100%;
		}
		#hyper4_how {
		    height: 100%;
		}
		#hyper4_how {
		    text-shadow: 2px 3px 1px black;
		}


	/* Book
	-----------------------------*/
		#hyper4_book .text-cell {
		    width: 100%;
		}
		#hyper4_book .img-cell {
		    margin-top: 0;
		}
		#booking-grid .cell-content {
		    padding: 2em;
		    padding: 2em 4em 2em;
		}
		#booking-grid h2 {
		    font-size: 26px;
		    line-height: 0.8;
		    margin-bottom: 10px;
		}
		#booking-grid .cell-content p {
		    font-size: 14px;
		}
		.cell-icon {
		    top: 0.5em;
		    left: 0.6em;
		}
		.cell-icon img {
		    width: 35px;
		}
		#booking-grid thead th {
		    line-height: 1;
		    font-size: 12px;
		}
		#booking-grid .desc-table td.col-name {
			width: 150px;
			line-height: 1.2;
		}
		.performance-table .col-booking .btn {
		    height: 100%;
		}

		/* cf7
		-----------------------------*/
			#contact-table input, #contact-table textarea, #contact-table select, #commentform input, #commentform textarea {
			    line-height: 1;
			    padding: 1em 1.5em;
			}
			input[type="checkbox"] {
			    width: 50px;
			    height: 22px;
			}
			input[type="checkbox"]:after {
			    width: 25px;
			    height: 18px;
			}

}

@media screen and (max-width: 600px) {
	.landing-img {
		max-width: 100%;
		height: 91.5vh;
		right: 0;
		left: 0;
	}
	.landing-img img{
		height: 100%;
		width: 100%;
	}
}



@media screen and (max-width: 767px) and (orientation: landscape) {
	.sm-circle {
	    left: -15%;
	}
	.bg-circle {
	    right: 0;
	    left: unset;
	    top: unset;
	    bottom: -50%;
	}
	.landing-header {
	    height: 100vh;
	}
	.landing-img {
	    right: 0;
	    bottom: -50px;
	}
}