/*======================================
 Frontend developed by Ari:
 https://github.com/Ari-Ario?tab=repositories
========================================*/ 

/*=============================
	Responsive CSS 
===============================*/

@media screen and (max-width: 1366px)  {
	.footer-border {
		width: 100%;
		padding-left:20px;
		padding-right:20px;
	}
}

@media screen and (max-width: 1194px)  {
	.footer-border {
		padding-left:40px;
		padding-right:40px;
	}

	main, .tabs {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tabs {
		padding:0 40px;
	}
	/* Hide the default tab links */
	.tablink {
		display: none;
	}
    .header {
        width: 100%;
        height: 92px;
    }
    .header-border {
        margin: 0;
        padding: 0;
        width: 100%;
    }
	.header-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 40px;
        align-items: center;
	}
    .sub-header {
		top:92px;
        height: 0px;
		border-bottom: none;
    }
    
	/* Show the menu icon */
	.menu-responsive {
		display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        width: 100%;
        height: 54px;
		top:92px;
		z-index: 10;
		background-color: #F1EFE5;
	    border-top: white solid 1px;
        border-bottom: white solid 1px;
		font-size: 17px;
		font-weight: 600;
		color: black;
		transition: left 0.3s ease-in-out; 
        font-family: "Noto Sans";
	}
    .wellcome {
        padding-left: 40px;
		text-decoration: none;
		color:inherit;
    }
    .menu-icon {
		position: relative;
        cursor: pointer;
        padding-right: 40px;
        font-size: 27px;
        font-weight: 200;
    }
	.header-content h2 {
        letter-spacing: 0;
    }
	/* Sidebar styling */
    main, .sidebar, .tabs {
        width: auto;
        align-items: center;
    }
	.sidebar {
		position: fixed;
		top: 0px;
		right: -422px; 
		width: 422px;
		height: 100%;
		background-color: #FFFFFF;
		z-index: 10;
		padding:0;
		padding-top: 60px;
	}

	/* Show sidebar when active */
	.sidebar.active {
		right: 0;
        padding-top: 105px;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}


	/* Move the close icon to the top-right separatly */
	.close-icon {
		display: none;
		position: fixed;
		top: 18px;
		right: 42px;
		font-size: 38px;
		color: black;
		z-index: 11;
		cursor: pointer;
	}

	/* Style the buttons inside the sidebar */
	.sidebar .tablink {
		display: block;
		width: 100%;
		float: none;
		text-align: left !important;
		align-items: left !important;
		padding: 0 6%;
		margin: 0;
        background-color: #FFFFFF;
        line-height: 17px;
		box-sizing: border-box;
		position:relative;
		z-index:2;
	}
    .sidebar::before {
        content: "Willkommen";
        font-family: "Noto Sans";
        font-size: 17px;
        font-weight: 600;
        color: #EE5731;
        padding: 0 6%;
    }
    .tablink:nth-child(1) {
        margin-top: 15px;
    }

	.about-container {
		padding: 0;
	}
	.button-popup {
		display: block;	
		margin-top: 50px !important;	
		margin: 0 auto;
		text-align: center;
		width: 80%;
		z-index:2;
		position:relative;
	}
	.reserved {
		display: block;
		position: absolute;
		bottom: 40px !important;
		font-family: "Noto Sans";
		font-size: 17px;
		font-weight: 600;
		padding: 0 30px;
		z-index:1;
	}
	.reserved nav a {
		display: block;
		text-decoration: none;
		padding: 14px 0 !important;
		color: black;
	}


	.description-container {
		width: 45%;
	}
	.description-container h1 {
		font-size: 38px;
	}
	.detail-container {
		width: 40%;
		font-size: 20px;
		text-align: left;
	}
	.owner-container {
		position: absolute;
		top: 94%;
		left: 45%;
	}
	.curves {
		top: 110%;
		left: 52%;
	}
	.second-illustration {
		margin-bottom: 0px;
	}
	li {
		text-align: left;
	}
	.card {
		flex: 1 1 calc(50% - 20px);
	}
	.card h2 {
		font-size: 28px;
	}
	.school-paddingbottom {
		/* padding-bottom: 1200px !important; */
	}
	.about-container {
		margin-left: 0px !important;
	}
	.img-row {
		width: auto;
	}
	.contact-form {
		width: 94%;
	}

	/* ------ FOOTER ------ */
	.reserved-rights {
		padding-left: 2%;
	}
	.reserved-rights nav {
		display: none;
	}
	.address-details:nth-child(2) {
		width: fit-content;
		min-width: fit-content;
	}
}

/* Footer Responsive <= 1024px */
@media screen and (max-width: 1024px) {
	/* FORM Responsive Design */
	.contact-form {
		padding: 40px;
		width: 94%;
        padding: 0px !important;
    }
	.form-section {
		padding: 0 20px !important;
	}
	.footer-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-detail {
		width: 100%;
		text-align: center;
	}

	.footer-address {
		justify-content: center;
		gap: 20px;
	}

	.footer-photos {
		justify-content: center;
	}
}  


@media screen and (max-width: 1023px) {
	*p {
		font-size: 17px !important;
	}
	*h1 {
		font-size: 35px;
	}

	.tabs {
		width: auto;
		max-width: 754px;
	}
	.sidebar .tablink,
	.sidebar .tablink p {
		text-align: left !important;
		align-items: left !important;
	}
	.standardconatainer {
		display: block;
	}
	.middle-description {
		margin-bottom: 0;
	}
	.content-containers{
		display: flex;
		flex-direction: row;
		height: auto;
		padding: 40px 10px;
		margin: 0;
	}
	.middle-parents {
		max-width: 490px;
		text-align: left;
	}
	.parentsh1 {
		width: 100% !important;
	}
	.diskalkulie1,
	.parents1,
	.therapy1,
	.therapy-cont2 {
		max-height: 600px;
	}
	.therapy1 {
		display: flex;
	}
	.therapy1 > * {
		max-width: 45% !important;
		align-items: center;
	}
	.therapy1 h1 {
		width: fit-content !important;
	}
	.therapy-cont2 {
		margin-bottom: 180px;
		display: flex;
		flex-direction: row;
	}
	.photo-th {
		max-width: 40%;
	}
	.photo-diskalkulie {
		align-self: center;
		margin-top: 30px;
		margin-left: auto;
	}

	.diskalkulie-paddingbottom {
		padding-bottom: 0px;
	}
	.parents-paddingbottom {
		padding-bottom: 0px;
	}
	.therapy-paddingbottom {
		padding-bottom: 0px;
	}
	.content-containers h1 {
		line-height: 40px;
		font-size: 35px;
	}
	.middleDescAbout h1 {
		font-size: 35px;
		line-height: 40px;
		text-align: left;
	}
	.middleDescAbout p {
		font-size: 17px;
		text-align: left;
	}
	.contact-form {
		width: 94%;
        padding: 0px !important;
    }
	*button {
		font-size: 17px !important;
		font-weight: 600;
	}
	.button-form {
		padding-left: 40px;
	}
	.form-description,
	.form-section {
		max-width: 94%;
	}
	.first-container {
		padding: 80px 40px ;
		margin-top: 40px;
		margin-bottom: 120px;
	}

	.header-white {
		width: 50%;
		font-size: 35px !important;
	}
	.detail-white {
		width: 45%;
		font-size: 17px;
	}
	.curveTablet1 {
	}
	.photo-container {
		max-width: 40%;
		padding: 0;
		margin: 0;
	}
	.description-container {
		width: 55%;
		height: fit-content !important;
		font-size: 17px !important;
		font-weight: 400;
	}
	.description-container h1 {
		font-size: 32px;
		font-weight: 700;
	}
	.section-questions p {
		font-size: 17px !important;
		line-height:1.2em;
	}
	.middle-containers {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.middle-description {
		max-width: 490px;
		margin-top: 40px;
		font-size: 17px !important;
	}
	.detail-container {
		width: 100%;
		font-size: 20px;
	}
	.owner-container {
		top: 100%;
		left: 43.3%;
		width: 140px;
		height: 140px;
	}
	.diskalkulie1, .parents1, .therapy1, .therapy-cont2 {
        max-height: fit-content;
    }
	.middle-parents {
		margin-top: 0;
	}
	.middle-therapy {
		width: 100%;
		max-width: 100%;
	}
	.middle-therapy h1,
	.middle-parents h1 {
		font-size: 25px;
        font-weight: 700;
		line-height: 40px;
	}
	.middle-parents p {
		font-size: 17px;
	}
	.middleDescAbout,
	.middle-therapy,
	.parents-faq {
		margin-top: 20px;
	}
	.middleDescAbout {
		padding: 0 20px;
		display: flex;
		justify-content: center; 
		align-items: center;
	}
	.curve3-container {
		margin-bottom: 100px;
	}
	.button-container {
		display: flex ;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 35px;
		margin-bottom: 140px;
	}
	.white-container2 .description-container{
		max-width: 50% !important;
	}

	.about-container {
		padding: 0;
		justify-content: center;
		align-items: center;
	}
	.photo-about {
		max-width: 40%;
	}
	.video {
		width: auto;
		max-width: 100%;
	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	.column {
	-ms-flex: 50%;
	flex: 40%;
	max-width: 50%;
	}
	.curvesTablet {
		display: block;
		padding-top: 5px;
	}
	.curvesCellphone,
	.curves {
		display: none;
	}
	.numbers {
		display: none;
	}
	.numbers-mobile {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; 
	}
	.number {
		z-index: 0;
	}
	.number-5 {
		top: 0%;
		left: 0%;
	}
	
	.number-4 {
		top: -6%;
		left: 6%;
	}
	.number-2 {
		top: 79%;
		right: 10%;
	}
	
	.number-0 {
		top: 92%;
		right: 22%;
	}
	.photo-introducing {
		width: 40%;
		padding-top: 20px;
		z-index: 8;
	}
	.cards-container {
		flex-direction: column;
		gap: 20px; 
		padding-top: 20px;
	}

	.card {
		flex: 1 1 100%;
		padding: 20px;
	}
	.card h2 {
		font-size: 25px;
		font-weight: 700;
	}
	.card p, .question-container p {
		padding-top: 0px;
		font-size: 17px;
		font-weight: 400;
	}

	.question-container h1, 
	.question-container2 h1,
	.question-parents h1 {
		line-height: 50px;
		text-align: left;
		margin-bottom: 30px;
		max-width: 70%;
		font-size: 32px;
		font-weight: 700;
	} 
	.question-container,
	.question-container2,
	.question-parents {
		padding: 0px;
		max-width: 490px;
	}
	.question-container,
	.question-parents {
		margin-bottom: 5%;
	}
	.faq-item { font-size: 17px; }
	.faq-item div:first-child {
		font-size: 17px;
		font-weight: 700;
	}
	.switchContainers {
		width: 100%;
	}
	.img-row {
		padding-bottom: 0;
	}

	.section-challenge h1 {
		max-width: 100%;
	}

	/* contact form */
	.contact-form {
		padding: 40px 0 !important;
	}
	.contact-form > * {
		max-width: 490px;
	}
	.form-description h1,
	.contact-form h1 {
		font-size: 32px !important;
        font-weight: 700;
		line-height: 40px;
		max-width: max-content;
	}

	.contact-form p {
		font-size: 17px;
		font-weight: 400;
	}

	.photo-th {
		max-width: max-content;
	}
	.middleDescTherapy,
	.middle-therapy {
        width: 490px;
        max-width: 490px;
    }


	footer {
		font-size:14px;
		height: auto;
	}

	.curve2 {
		top: 105% !important;
	}
	.curve3 {
		left: 45% !important;
		top: 105% !important;
	}
	.curve-diskalkulie {
		top: 0;
	}

	.footer-content {
		display: block;
	}

	.footer-photos {
		flex-direction: column;
		align-items: center;
		max-width: 45%;
	}
	.footer-address {
		display: block !important;
	}
	.footer-description,
	.footer-address {
		text-align: left;
	}
	.address-details {
		padding: 10px 0;
	}


	.reserved-rights nav a {
		margin: 0;
	}

}



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

	.form-row {
		flex-direction: column;
		gap: 10px;
	}

	input[type="text"],
	input[type="number"],
	input[type="tel"],
	select {
		padding: 8px;
	}

	button[type="submit"] {
		padding: 10px;
	}
}




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

	body {
		width: 100%;
		padding: 0;
		display: flex;
		justify-content: center;
		/* outline: 1px solid red; */
	}
	main, .sidebar, .tabs {
        width: auto;
		justify-content: center;
        align-items: center;
		padding: 0;
    }
	main, .tabs {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	main {
		width: 100% !important;
		/* outline: 1px solid red; */
	}
	footer {
		height: fit-content !important;
		max-height: fit-content !important;
	}
	.footer-border {
		padding: 20px 0 !important;
	}
	.line-space {
		left: 0;
		bottom: 0;
		padding-top: 0 !important;
	}
	.tabs {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.tabcontent {
		padding: 0;
		margin: 0;
		max-width: 90%;
	}
	
	.header {
		top: 0;
		width: 100vw;
		padding: 0;
		height: 92px;
	}

	.header-content {
		width: 100vw;
		padding-left: 20px !important;
	}
	*h1 {
		font-size: 25px !important;
	}
	*p, ul li {
		line-height: 24px !important;
	}

	header {
		max-width: 100%;
		height: fit-content;
	}
	.header-border {
		padding: 0;
		margin: 0;
	}
	.header-description{
		display: block;
	}
	.button-header {
		display: none !important;
	}
	.header-content h1 {
		font-size: 20px;
		font-weight: 400;
	}

	.header-content h2 {
		letter-spacing: 0;
		font-size: 24px;
	}
	.sidebar .tablink {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: left;
	}
	.sidebar .tablink p {
		display: block !important;
		text-align: left !important;
		width: 100% !important;
		align-items: left !important;
	}
	.wellcome {
		padding-left: 5% !important;
		font-size: 16px !important;
	}
	.menu-icon {
		top: 0px !important;
		padding-right: 24px;
	}
	.button-text {
		padding: 0px;
		width: 100%;
	}
	.button-header {
		font-size: 11px !important;
		max-width: 210px;
		font-weight: 600; 
	}
	.menu-icon {
		font-size: 32px;
		top: 10px;
	}
	.tablink {
		float: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		text-align: left;
		padding: 0;
		margin: 0;
		width: 100%;
		font-size: small;
	}
	
	.sidebar {
		height: fit-content;
		background-color: #F1EFE5;
		z-index: 10;
	}
	.sidebar.active {
		left: 14%;
		max-width: 86%;
		height: 100%;
	}

	.reserved {
		max-width: 100% !important;
	}
	.first-container {
		display: block;
		text-align: center;
		align-items: center;
		margin-top: 10px;
		margin-bottom: 60px !important;
		height: auto;
		max-height: fit-content;
		padding: 4vh 0 4vh 8vw !important;
	}
	.first-container h1 {
		font-size: 28px;
	}
	.first-container h1 {
		font-size: 28px;
	}
	.header-white {
		width: 90% !important;
		margin: 0;
	}
	.detail-white ul li {
       	line-height: 24px !important;
	}
	.detail-white ul {
        font-size: 17px;
		padding: 0;
		gap: 8px;
    }
	.owner-container {
		top: auto;
		bottom: -16%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
	}
	.container-reverse .photo-container {
		order: 1;
	}
	.container-reverse .description-container {
		order: 2;
	}
	.container-reverse .curveCellphone1 {
		order: 3;
	}
	.curve-cont { display:block!important; width:auto!important; text-align:center; }
	.white-container {
		padding: 20px;
	}
	.white-container p{
		font-size: 17px;
	}
	.white-container2 {
		display: flex !important;
		flex-direction: column-reverse !important;
		padding: 20px !important;
		height: auto;
	}
	.white-container2 .description-container{
		max-width: 50% !important;
	}
	.white-container2 .description-container {
		width: 100%;
		max-width: 100% !important;
	}
	.white-container2 .photo-introducing {
		width: 100%;
		padding: 0;
	}
	.owner-container {
		display: none;
	}
	.content-containers {
		padding: 0;
		margin: 20px 0;
		max-width: fit-content;
		width: fit-content;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		max-width: 100%;
	}
	.content-containers >* {
		width: 100%;
	}
	.content-containers h1 {
        text-align: left;
    }
	.therapy1 > * {
        max-width: 100% !important;
        align-items: center;
    }
	.diskalkulie-description {
		padding: 0;
	}
	.section-questions p {
		font-size: 17px !important;
	}
	.content-containers >* {
		text-align: center;
	}
	.photo-container {
		max-width: 100%;
		width: fit-content;
	}
	.photo-about {
		width: 375px;
		max-width: 100%;
	}
	.photo-about .video {
		width: 100%;
	}
	.description-container {
		width: 100%;
		padding: 0 !important;
		margin: 0 !important;
	}
	.diskalkulie-faq {
		padding-top: 0;
	}
	.middleDescTherapy,
	.middle-therapy {
		padding-left: 0;
        width: 375px;
        max-width: 375px;
    }
	.curve3-container {
		margin-top: 0 !important;
	}
	.question-container {
		margin-top: 100px;
	}
	.question-container,
	.question-container2,
	.question-parents {
		padding-left: 0px;
	}
	.form-description h1, .contact-form h1 ,
	.description-container h1,
	.question-container h1,
	.question-container2 h1,
	.question-parents h1 {
        line-height: 30px;
        text-align: left;
        /* margin-bottom: 30px; */
		width: auto;
        max-width: 100%;
        font-size: 25px !important;
        font-weight: 700;
    }
	.question-container2 p, 
	.question-container p, 
	.question-parents p {
		margin-bottom: 30px;
	}
    .card h2 {
		line-height: 30px;
        margin-bottom: 0px;
    }
	.circle-photo {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.owner-photo {
		height: auto !important;
	}
	.description-container {
		font-size: 17px !important;
		font-weight: 400;
		padding: 0;
		margin: 0;
	}
	.detail-white {
		width: 90%;
	}
	.middle-description {
		width: 100%;
		margin: 0;
	}
	.middleDescAbout,
	.middleDescTherapy, .middle-therapy {
		width: 100%;
        max-width: 100%;
		padding: 0;
    }
	.middleDescTherapy p, .middle-therapy p {
        font-size: 17px;
    }
	.therapy1 {
		padding-bottom: 60px;
    }
	.curve3-container {
		margin-bottom: 60px !important;
	}
	.photo-about {
		padding-top: 0;
	}

	.button-container {
		margin-bottom: 80px !important;
	}
	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	.column {
	-ms-flex: 100%;
	flex: 100%;
	max-width: 100%;
	}
	.section-challenge h1 {
		font-size: 24px;
	}
	.section-challenge p {
		font-size: 17px !important;
	}
	.curves {
		display: none;
		top: 115%;
		left: 50%;
	}
	.curvesTablet {
		display: none;
	}
	.curvesCellphone {
		display: block;
		padding-top: 20px;
	}
	.numbers {
		display: none;
	}
	.number-5 {
		top: 0%;
		left: -6%;
	}
	
	.number-4 {
		top: -2%;
		left: 20%;
	}
	.number-9 {
		top: 68%;
		right: 2%;	
	}
	.number-2 {
		top: 84%;
		right: 16%;
	}
	
	.number-0 {
		top: 94%;
		right: 35%;
	}

	.button-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        column-gap: 35px;
        margin-bottom: 140px;
    }

	.contact-form {
		max-width: 90%;
	}

	.contact-form > * {
		max-width: 90%;
	}

	/* Switch */
	.switch {
		width: 340px;
	}
	.labels {
		width: 100%;
		font-size: 10px !important;
		font-weight: 500;
	}
	.switchContainers {
		width: 100%;
	}
	.switch-container {
		margin: 68px 0 126px 0;
		width: 100%;
		min-width: 100px;
	}
	.timeline-content span:first-child,
	.timeline-year  {
		font-size: 20px;
		font-weight: 700;
	}
	#switch:checked + .switch .slider::before {
		transform: translateX(160px);
	}

	.img-row .column img {
		/* width: fit-content !important; */
	}
	#about {
		display: flex !important;
		justify-content: center !important;
		align-items: center;
	}
	.section-challenge {
		margin: 0;
		margin-top:60px;
		margin-bottom:60px;
	}
	.middle-parents,
	.section-middle {
		padding-bottom: 10px !important;
	}
	.last-section {
		padding-bottom: 0px;
	}
	/* Contact Form */

	input[type="text"],
	input[type="number"],
	input[type="tel"],
	select {
		padding: 6px;
	}

	button[type="submit"] {
		padding: 8px;
	}

	/* Footer */
	footer {
		height: fit-content;
		padding-bottom:0;
	}
	.footer-border {
		max-width: 88%;
		padding-top: 400px;
		padding-bottom:0;
	}
	.footer-content {
		flex-direction: column;
	}
	.footer-detail {
		max-width: 100%;
		text-align: center;
	}
	.footer-photos {
		max-width: fit-content;
		text-align: center;
	}
	.footer-description {
		line-height:1.2em;
	}
	.footer-description h2 {
		font-size: 24px;
		font-size: 600;
	}

	.footer-description h3 {
		font-size: 32px;
		font-weight: 600;
	}
	.line-space {
		padding-top: 400px;
	}
	.reserved-rights {
		font-size: medium;
		padding-left: 5%;
	}
	.footer-address div {
		line-height: 1.4em;
	}
	.footer-address span { display:inline; }
	.footer-photos {
		width: 100%;
	}
	.photo-placeholder {
		width: 320px;
		height: 200px;
	}

}


/* Popup Footer Responsive HEIGHT <= 800px like iphone SE or Samsung 58+ etc */
@media screen and (max-height: 760px) {
	/* FORM Responsive Design */
	.reserved nav{
		line-height: 8px;
	}
	.button-popup {
        margin-top: 20px !important;
    }
	.reserved {
		font-size:12px !important;
		line-height:1.5em !important;
		bottom: 0 !important;
	}
	.reserved nav a { display:inline-block; margin-right:1em; font-weight:normal; padding:0 !important; padding-bottom:0.5em !important; }
	.reserved p {
		margin-top:0;
	}
}