/*index*/

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre');
@font-face{
	font-family: Noto;
	src: url(NotoSerif-Regular.ttf);
}

@font-face{
	font-family: Noto;
	src: url(NotoSerif-Regular.ttf);
}
body {
		margin-top: 10px;
		background-color: #22304B;
	}
	
	
.button {
		border: 3px solid white;
	}
	
h1 {
		font-size: 30px;
		color: #ffffff;
		font-family: 'Frank Ruhl Libre', serif;
		margin-bottom: 20px;
	}
h2 {
		font-size: 28px;
		color: #ffffff;
		margin-bottom: 10px;
		font-family: 'Frank Ruhl Libre', serif;
	}	
	


.container {
	width: 60%;
	  
    }
	
.contentContainer{
	
	  

    }

.contentContainer p {
      color: #ffffff;
	  font-size: 18px;
	  margin-top: 30px;
	  margin-bottom: 30px;
	  

    }
	
.contentContainer p2 {
      color: #ffffff;
	  margin-bottom: 30px;
	  font-size: 20px;
	  text-align: center;
	  justify-content: center;

    }



.contentContainer p3 {
      color: #ffffff;
	  font-size: 30px;
	  margin-top: 30px;
	  margin-bottom: 30px;
    }
	


.btn {
	margin-right: 10px;
	margin-bottom: 10px;
	width: 94%;
	font-weight: 500;
	display: flex; 
	align-items: stretch; 
 	justify-content: center; 
	}

.btn-primary {
      
      background-color: #D2753E !important;
      border-color: #D2753E !important;
      border-radius: 20px;
	  text-shadow: 1px 1px 1px #8a8884; 
	  font-size: 20px;
	  justify-content: center; 
    }

.btn-primary:hover {
      background-color: #E6964C !important;
      border-color: #E6964C !important;
	  
    }


.btn-primary.clicked {
      background-color: #E6964C !important;
      border-color: #E6964C !important;
      box-shadow: 0 0 2px 2px #D2753E !important;
  
    }
    
	
.btn-first {
		width:50%;
		float: left;
		display: flex;
		align-items:center;
		justify-content: center;

	}

.btn-second {
		width:50%;
		float: right;
		display: flex;
		align-items:center;
		justify-content: center;
		
	}

.col {
      display: flex;
	  margin-bottom:20px;
    }

.flex-container {
		display: flex;
		flex-direction: row;
		font-size: 10px;
		margin-top: 30px;
		width : 100%;
		align-items:stretch;
	}


/*FAQ*/


	
	
.faq-item input[type="checkbox"] {
      display: none;
	  border-bottom: 1px solid #000000;
	  margin-bottom: 10px;
	  margin-top: 10px;
	  text-align: left;
	  
	  
    }

.faq-item label {
    display: block;
    background-color:#22304B; 
    margin-bottom: 10px;
	margin-top: 10px;
	color: #ffffff;
	text-align: left;
    }

.faq-item label span {
      float: right;
	  text-align: right;


    }


.faq-item input[type="checkbox"]:checked ~ label span img{
      transform: rotate(180deg);
	  float: right;
	  text-align: right;

    }

.faq-item .answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
	  border-bottom: 1px solid #FFFFFF;
	  margin-bottom: 10px;

    }

.faq-item input[type="checkbox"]:checked ~ .answer {
      max-height: 1000px;
	  border-bottom: 1px solid #FFFFFF;
	  color: #ffffff;
	  margin-bottom: 10px;

    }

	
.button {
    border: 3px solid white;
	}
	

a:hover {
  	color: white;
  }

footer {
  
  justify-content: center;
  margin-top: 10px;
  padding: 10px;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
 
}

.whitebackground {
  color: black; 
}

.whitebackground a {
	color: black; 	
}

.whitebackground a:hover {
	color: black; 	
}


	
h3{ 
	color: #ffffff;
	background-color: #22304B;
	font-size: 30px;
	font-size: 30px;
	font-family: Noto;


	}
	


	
.logo {
	margin-top: 10px;
	  max-width: 375px;
	  margin-bottom: 20px;
	
	}
	
.faq-question {
	  cursor: pointer;
	  font-weight: bold;
	  margin-bottom: 10px;
	  padding: 10px;
	  background-color: #D2753E;
	  color: #FFFFFF;
	  border-radius: 5px;
	  text-shadow: 2px 2px 4px #000000; 
	}
	
.faq-answer {
	  display: none;
	  padding: 10px;
	  background-color: #E6964C;
	  color: #FFFFFF;
	  border-radius: 5px;
	  margin-bottom: 20px;
	  text-shadow: 2px 2px 4px #000000; 
	}
	
.hidden{
		display:none;
	}
	
.text-center {
	  color: #FFFFFF;
	  text-link
	}

	
	
	/* Added focus styles */
.faq-question:focus {
	  outline: none;
	}
	
	/* Added focus styles */
.faq-question:focus + .faq-answer {
	  display: block;
	}
	
.question {
		font-size: 22px;
		font-weight: 50;
	  

	}
	
.answer{
		font-size: 18px;
		font-weight: 50;


	}
@media(max-width: 600px) {
	.container {
	  background-color: #22304B;
	  color: #FFFFFF;
	  border-radius: 10px;
	  width: 100%;
	}
	.logo {
		margin-top: 2%;
		max-width: 78%;
	  
	}
	.header {
	  background-color: #FFFFFF;

	  text-align: center;
	  margin-bottom: 0px;
	}
	.col{
		margin-bottom: -5%;
		
	}
	h3{ 

	  color: #ffffff;
	  font-size: 20px;
	}
	

	.img{
		height: 10vh;
	}
	
	.contentContainer{
	max-width: 98%;
	  

    }
	.flex-container {
		display: flex;
		flex-direction: row;
		font-size: 10px;
		margin-top: 30px;
		width : 110%;
		margin-bottom: 10px;
	}
	.question {
		font-size: 15px;
		font-weight: 500;
	    margin-bottom: 90px;
	  

	}
}