@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Colours
2. Safari
3. 1600px
4. 1540px
5. 1300px
6. 1240px
7. 1024px
8. 991px
9. 959px
10. 880px
11. 830px
12. 768px
13. 767px
14. 575px
15. 539px
16. 480px
17. 479px
18. 400px


******************************/


/***********
1. Colours
***********/

:root 
{
	--main-bg-color: #739e82;
	--main-bg-color-light: #739e8288;
	--main-bg-color-lighter: #739e8233;
	--main-dark-grey: #1a1a1a;
	--main-mid-grey: #5a5a5a;
	--main-light-grey: #a5a5a5;
	--main-off-white: #fbfbfb;
	--other-off-white: #f0f0f0;
	--main-yellow: #ffbb00;
}



/***********
2. Safari (Fuck you Apple)
***********/

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {

	.pre-header
	{
		background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.7) 100%);
	}
	.pre-header a
	{
		font-size: 400;
	}
	.header
	{
	background: rgba(255,255,255,1);
	}
	.dropdown-content 
	{
		background: rgba(255,255,255,0.9);
	}
	.faq_background_blur
	{
		background-color: #ffffffe0;
	}
	.accordion
	{
		background: white;
	}
	.hero_box
	{
		background: rgba(55,55,55,0.2);
	}

}



/************
3. 1600px
************/

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

/************
4. 1540px
************/

 @media only screen and (max-width: 1540px)
{
	.header
	{
		width: 100%;
	}
	.header_content
	{
		width: 100%;
	}
	.main_nav_container
	{
		padding-right: 53px;
	}
	.hero_slide_content h1
	{
		font-size: 56px;
	}
	.card-title
	{
		font-size: 20px;
	}
	.admissions_content,
	.faq_content
	{
		width: 542px;
	}
}

/************
5. 1300px
************/

@media only screen and (max-width: 1300px)
{
	.hero_box
	{
		padding-left: 20px;
	}
	.header_side
	{
		display: none !important;
	}
}

/************
6. 1240px
************/

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

	.main_nav_container
	{
		display: none;
	}
	.logo_container
	{
		padding-left: 30px;
	}
	.hamburger_container
	{
		display: block;
	}
	.pre-header
	{
		justify-content: center;
		background: rgba(0,0,0,0.6);
	}
	.home_content
	{
		top: calc(55% + 25px);
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.home_content h1, p
	{
		text-align: center;
		color: white;
	}
	#lottie
	{
		width: 400px;
		top: -50%;
	}
	.unique-super-container
	{
		margin: auto;
		width: 100%;
	}
	.unique-container
	{
		width: calc(90vw);
		height: calc(43vw);
		margin: auto;
		display: grid;
		grid-template-columns: repeat(4, minmax(15vw, 1fr));
		grid-template-rows: repeat(2, minmax(15vw, 1fr));
		gap: 2vw;	
	}
	.random_item p, .project_content p 
	{
		text-align: left;
	}
	.contact_p, .footer_about_text 
	{
		text-align: left;
	}
	.admissions_content,
	.faq_content
	{
		width: 442px;
	}
	.program_container
	{
		padding-inline: 10px;
	}
}

/**************
6. 1200px
**************/
@media only screen and (max-width: 1200px)
{
	.sidebar_list_item, .sidebar_list_item_x, .sidebar_list_item_x, .sidebar_list_item_active
	{
		padding-inline: 15px;

	}
}

/************
7. 1024px
************/

@media only screen and (max-width: 1024px)
{
	.main_nav_item
	{
		margin-right: 33px;
	}
	.fb_boxes
	{
		display: none;
	}
}

/************
8. 991px
************/

@media only screen and (max-width: 991px) /*991*/
{
	.super_container_sticky
	{
		overflow: hidden;
	}
	.pre-header span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	.pre-header i
	{
		border: 0px solid white;
		padding: 0;
		margin: 0;
		padding-inline-start: 15px;
	}
	.home
	{
		height: 75vh;
	}
	.home_content
	{
		top: calc(70%);
	}
	.home_content_short h1
	{
		font-size: 42px;
	}
	.hero_slide_content h1
	{
		font-size: 48px;
	}
	.hero_boxes
	{
		width: 100%;
		height: auto;
		padding-top: 80px; /*117px;*/
		padding-bottom: 80px;
		background-color: var(--other-off-white);
	}
	.hero_boxes_inner
	{
		position: relative;
		top: auto;
	}
	.hero_box
	{
		padding-left: 50px;
		background: rgba(5,5,5,0.25);
		background: var(--main-bg-color);
		transition: 500ms;
	}
	.hero_box:hover
	{
		padding-left: 65px;
		transition: padding 600ms;
	}
	.hero_box_col
	{
		margin-bottom: 30px;
	}
	.hero_box_col:last-child
	{
		margin-bottom: 0px;
	}
	.svg path
	{
		fill: white;
		transition: 600ms;
	}
	.unique-super-container
	{

	}
	.sidebar
	{
	position: static;
	width: 100%;
	margin-bottom: 50px;
	background: white;
	border-top: 1px solid white;
	}
	.sidebar_section
	{
		margin-top: 0px;
		padding-top: 0px;
	}
	.sidebar_section_2
	{
		margin-top: 0px;
		padding-top: 20px;
	}
	.sidebar_image
	{
		display: none;
	}
	.sidebar_image_2
	{
		display: none;
	}
	.sidebar_list_item, .sidebar_list_item_x, .sidebar_list_item_active
	{
		padding-inline: 30px;
	}
	.accordion
	{
		padding-block: 15px;
	}
	.course_box
	{
		margin-bottom: 80px;
	}
	.course_box:last-child
	{
		margin-bottom: 0px;
	}
	.faq_section
	{
		padding-top: 156px;
		padding-bottom: 161px;
	}
	.admissions_content,
	.faq_content
	{
		width: 75%;
	}
	.academics_section_tall
	{
		padding-top: 256px;
	}
	.testimonials_slider_container
	{
		padding-left: 0px;
		padding-right: 0px;
	}
	.program-margin
	{
		padding-left: 20px !important;
	}
	.action_call_text
	{
		padding-inline: 10px;
	}
	.action_call_title
	{
		text-align: left;
	}
	.contact_card
	{
		min-width: 0;
		margin-bottom: 0px;
		border: transparent;
		border-bottom: 1px solid #e4e4e4;
		min-height: 140px;
	}
	.contact_card:nth-last-child(1)
	{
		margin-bottom: 41px;
		border: transparent;
	}
	.elements_accordions
	{
		margin-top: 80px;
	}
	@keyframes hands-footer 
	{
		0%   { background-position: center;}
		100%   { background-position: center;}
	  
	}
	.footer_col
	{
		margin-bottom: 30px;
	}
	.footer_col:last-child
	{
		margin-bottom: 0px;
	}
}

/************
9. 959px
************/

@media only screen and (max-width: 959px)
{
	.home_content
	{
		padding: 0;
	}
	#lottie
	{
		top: -100%;
	}
}

/************
10. 880px
************/

@media only screen and (max-width: 880px)
{
	.unique-container
	{
		width: calc(90vw);
		height: calc(130vw);
		padding-top: 25px;
		margin: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(15vw, 1fr));
		grid-template-rows: 1fr 1fr 1fr;
		gap: 2vw;	
	}

	.g1 
	{
		grid-column: 1 / 3;
		grid-row: 1;
	}
	
	.g2 
	{
		grid-column: 1 / 2;
		grid-row: 2;
	}
	
	.g3 
	{
		grid-column: 2 / 3;
		grid-row: 2;
	}
	
	.g4 
	{
		grid-column: 1 / 2;
		grid-row: 3;
	}

	.g5 
	{
		grid-column: 2 / 3;
		grid-row: 3;
	}

}

/************
11. 830px
************/

@media only screen and (max-width: 830px)
{
    #gallery
    {

    }
}

/************
12. 768px
************/

@media only screen and (max-width: 768px)
{
	.home_content
	{
		padding: 0;
		top: calc(55% + 50px);
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 90vw;

	}
	.home_content h1
	{
		font-size: 42px;
		font-weight: 900;
		color: white;
		text-shadow: 5px 5px 10px rgba(0,0,0,0.2);
		white-space: nowrap;
		line-height: 1.5;
		white-space: wrap;
	}
	.home_content p
	{
		font-size: 16px;
		font-weight: 400;
		color: #F0F0F0;
		text-shadow: 5px 5px 10px rgba(0,0,0,0.2);
		line-height: 1.5;
		word-wrap: break-word;
		white-space: wrap;
	}
	.home_content_short h1
	{
		font-size: 32px;
	}
	.projekt-container 
	{
		grid-template-columns: 1fr;
	}
	.projekt-text
	{
		border-left: 1px dashed #739e8233;
	}
	.projekt-container:hover .projekt-text
	{
		border-right: none;
		border-block: none;

	}
	.program_post_collage, .program_post_collage_four, .program_post_collage_x
	{
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
	}
	.program_post_collage img:nth-of-type(n+3), .program_post_collage_four img:nth-of-type(n+3)
	{
		display: none;
	}
	.buttonX
	{
		display: block;
		width: 60%;
	}

}

/************
13. 767px
************/

@media only screen and (max-width: 767px)
{
	.menu_container
	{
		right: -100vw;
		width: 100vw;
		height: 100vh;
	}
	.project_date
	{
		width: 81px;
		height: 81px;
		border: solid 4px var(--main-bg-color);
		margin-bottom: 32px;
	}
	.project_date_onmouseover
	{
		width: 81px;
		height: 81px;
		border: solid 6px var(--main-bg-color);
		margin-bottom: 32px;
	}
	.project_day
	{
		font-size: 32px;
	}
	.project_day_onmouseover
	{
		font-size: 32px;
	}
	.home_content
	{
		top: calc(70%);
	}
	#lottie
	{
		width: 400px;
	}

/************
14. 667px
************/
@media only screen and (max-width: 667px)
{


}


/************
14. 575px
************/

@media only screen and (max-width: 575px)
{
	h1{font-size: 24px;}
	p{font-size:13px;}
	.header
	{
		height: 74px;
	}
	.logo_container
	{
		padding-left: 15px;
	}
	.logo img
	{
		width: 180px;
	}
	.logo span
	{
		font-size: 16px;
	}
	.hamburger_container
	{
		right: 5px;
	}
	.menu
	{
		top: 70px;
	}
	.menu_item
	{
		margin-block: 0px;
		padding-block: 20px;
	}
	.menu_item
	{
		font-size: 12px;
	}
	.menu_copyright
	{
	
	}
	.menu_social_container
	{

	}
	.menu_close_container
	{
		right: 30px;
		top: 34px;
	}
	.hero_slider_nav
	{
		display: none;
	}
	.hero_slide_content
	{
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	.card-title
	{
		margin-top: 30px;
	}
	.card-title a
	{
		font-size: 20px;
	}
	.card-text
	{
		font-size: 13px;
	}
	.academics_text
	{
		padding-inline: 0;
	}
	.admissions_section,
	.faq_section
	{
		padding-top: 115px;
		padding-bottom: 120px;
	}
	.admissions_content,
	.faq_content
	{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	.admissions_text
	{
		margin-top: 25px;
	}
	.admissions_button
	{
		margin-top: 53px;
	}
	.random_row
	{
		padding-inline: 20px;
	}
	.testimonials_slider .owl-dots
	{
		display: none !important;
	}
	.testimonials_item
	{
		padding-bottom: 0px;
	}
	.projekt-text
	{
		padding-inline: 25px;
	}
	.project_date
	{
		width: 81px;
		height: 81px;
	}
	.project_date_onmouseover
	{
		width: 81px;
		height: 81px;
	}
	.project_day
	{
		font-size: 36px;
	}
	.project_day_onmouseover
	{
		font-size: 36px;
	}
	.project_month
	{
		font-size: 14px;
	}
	.project_name
	{
		margin-top: 5px;
	}
	.project_name_onmouseover
	{
		margin-top: 5px;
	}
	.footer_bar
	{
		padding-top: 49px;
		padding-bottom: 52px;
	}
	.footer_social
	{
		margin-top: 20px;
	}
	.footer_copyright span
	{
		font-size: 13px;
	}
	.buttonX
	{
		display: block;
		width: 80%;
	}
}

/************
15. 539px
************/

@media only screen and (max-width: 539px)
{
	.academics_content
	{
		padding-inline: 0px;
	}
}

/************
16. 480px
************/

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

/************
17. 479px
************/

@media only screen and (max-width: 479px)
{
	.header
	{
		height: 60px;
		top: 25px;
	}
	.hero_slide_content h1
	{
		font-size: 48px;
	}
	.hero_slide_content h1 span
	{
		padding-left: 5px;
		padding-right: 5px;
		margin-left: 0px;
		margin-right: 0px;
	}
	.home_content
	{
		top: calc(60%);
	}
	#lottie
	{
		width: 70vw;
		top: -50%;
	}
	.home
	{
		height: 85vh;
		clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	}
	.hero_boxes
	{
		height: 320px;
		background-color: var(--other-off-white);
	}
	.hero_boxes_inner
	{
		position: absolute;
		top: -15%;
		padding-inline: 30px;
	}
	.hero_box
	{
		padding-left: 30px;
		height: 80px;
	}
	.hero_box_content
	{
		padding-top: 6px;
		padding-left: 20px;
	}
	.hero_box_content h2
	{
		font-size: 15px;
	}
	.hero_box_content span
	{
		display: none;
	}
	.hero_box img
	{
		width: 45px;
	}
	.hero_box_title
	{
		font-size: 18px;
		margin-bottom: 3px;
	}
	.hero_box_link
	{
		font-size: 10px;
	}
	.sidebar_section
	{
		margin-top: 10x;
		padding-top: 0px;
	}
	.academics_text
	{
		margin-bottom: 0px;
		text-align: center;
	}
	.tag
	{
		width: 100%;
	}
	.buttonX
	{
		display: block;
		width: 100%;
	}
	.table-2 tr
	{
	  height: calc(1.2em * 5);
	}
}

/************
18. 400px
************/

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