/*these are my fonts for my text imported from google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

body{
  background-image: url(../images/background2.jpg);
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*style for burger menu starts*/

*, *:before, *:after 
{ box-sizing: border-box; }


/*style for white circular background of menu*/
label .menu {
  position: absolute;
  left: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
  
}

/*style for hamburger lines*/
label .hamburger {
  position: absolute;
  top: 135px;
  right: 50px;
  width: 30px;
  height: 3px;
  background: #0086AD;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #0086AD;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

/*style for close button and whitebackground of menu*/
label input:checked + .menu {
  box-shadow: 0 0 0 200vw #FFF,  0 0 0 200vh #FFF;
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; }

/* link style */
label ul {
  font-family: 'Lexend', sans-serif; 
  color:#0086AD;
  font-size: 18pt;
  font-weight: bold;
  letter-spacing: 0.04em;
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;

}

label a {
  margin-bottom: 1em;
  display: block;
  color: #0086AD;
  text-decoration: none;
  
}
/*style for burger menu ends*/

/* style for main content */
.content{
	box-sizing: border-box;
	background-color: white;
	padding: 15px 60px 25px;
	display: block;
	margin: 50px auto;
	width: 100%;
	max-width: 900px;
	height: 100%;
	position: relative;
}


/*style for headers start*/
h1{
	font-family: 'Lexend', sans-serif;
	font-weight: 600;
	color: #0C288C;
	font-size: 24pt;
	letter-spacing: 0.24em;
	text-align: center;
}	


h3{
	font-family: 'Lexend', sans-serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 14pt;
	letter-spacing: 0.04em;
	text-align: center;
}	
/*style for headers ends*/

/*style for my paragraphs*/
p{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	color: #0C288C;
	font-size: 11pt;
	line-height: 1.8em;
	letter-spacing: 0.01em;

}

p1{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	color: #0C288C;
	font-size: 11pt;
	line-height: 1.8em;
	letter-spacing: 0.01em;
	display: none;
}

/*style for modal images starts*/

/* for all thumbnail images only*/
#thumbnails img {
	border: 5px;
	border-radius: 5px;
	box-shadow: 5px 5px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: 5px 5px 6px rgba(0,0,0,0.3);
}

#thumbnails a {
	display: inline-block;
	background-color: ;
}

#overlay-image {
	position: fixed;
	padding: 4px;
	background-color: #FFF;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

#right, #left, #close {
	position: absolute;
	cursor: pointer;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: black;
}

/* Content for for all thumbnail images only ends here...*/

/*style for footer*/
.footer{
	position: relative;
	background-color: #0C288C;
	height: 60px;
	margin: 50px auto;
	padding: 1px 0px ;
	width: 100%;
	max-width: 900px;
}