/* CSS Document */

html {
	
	
 /* height: 100vh;*/
}


body {
font-family: "operetta-18", serif;
font-weight: 400;
font-style: normal;	
	max-width: 100vw;
	overflow-x: hidden;
	position: relative;
	margin: 0;
	color: rgba(26,26,26,1.00);

}

h1 {
	font-size: 24pt;
	font-weight: 400;
}


h2 {
	font-size: 18pt;
	font-weight: 400;
}


a {
	
	color: grey;
	display: flex;
	font-weight: 100;
	font-style: normal;
	text-size-adjust: auto;
	vertical-align: middle;
	letter-spacing: 3px;
	text-decoration: none;
	justify-content: center;
	align-items: center;
}

hr {
    color: grey;
    border-style: solid;
    margin-right: 100px;
    margin-left: 100px;
    clear: both;
}

p {
	font-size: 14pt;
}

ul {
	padding-inline-start: 0;
}

label {
	height: 100%;
	padding-right: 20px;
}

textarea {
	height: 200px;
	font-size: 14pt;
}


/*____________________________________________________Header_______________________*/

header {
position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 120px;
}


.site-head {
	opacity: 100%;
		background-color: rgba(50,50,50,0.8);
	position: fixed;
	top: 0;
	z-index: 998;
    padding:10px 0;
}

.animation-head {
	opacity: 0;	
	animation-name: appear;
	animation-duration:1s;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
}

.logo {
	margin-left: 100px;
	width: 200px;
}

.logo a img {
	width: 200px;
	height: auto;
	margin: 5% 0;
	fill: black;	
}

.hamburger {
	display: none;
	margin-right: 30px;
}

.bar {
	display: block;
	width: 35px; 
	height: 4px;
	margin: 8px auto;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: grey;
}

.navbar {
		display: flex;

	justify-content: space-between;
	align-items: center;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding-right: 100px;
}

.nav-item {
	margin-left: 5rem;
	list-style-type: none;
	color: rgba(200,200,200,0.9);
	display: block;
	font-weight: 100;
	font-size: 18pt;
	font-style: normal;
}

.nav-link:hover {
	color: rgba(200,200,200,1);
}

/*____________________________________________________Main_______________________*/

main {
	
	position: relative;
	min-height: 100vh;
	top: 0;
	padding-bottom: 120px;
}

section {
	position: relative;
}

/*____________________________________________________Section 1_______________________*/

.sec1 {
	height: 100vh; /* 85vh */
	margin: 0;
	padding-top: 130px;
	background-color: black;
	position: relative;
}

.main-video {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	height: 90%;
	max-width: 90%;
	z-index: -1;
}

.video-caption {
	letter-spacing: 7pt;
	font-size: 18pt;
	color: gray;
}

.video-caption h1 {
	font-weight: 500;
}

.sec1 h1 {
	text-align:center;
	z-index: 100;
}

.overlay-one {
   position:absolute;
    top:120px;
    left:0;
	right: 0;
	margin: 10px auto;
    z-index:90;
	animation-name: appear;
	animation-duration: 5s;
	animation-delay: 0;
	animation-fill-mode: backwards;
}

.overlay-two {
   position:absolute;
    bottom:10px;
    left:0;
	right: 0;
	margin: 20px auto;
    z-index:90;
	animation-name: appear;
	opacity: 0;
	animation-duration: 5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.overlay-six {
   	position:absolute;
   
	top: 50vh;
    left:0;
	right: 0;
	margin: 20px auto;
    z-index:0;
	animation-name: appear;
	opacity: 0;
	animation-duration: 5s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}


/*____________________________________________________        Section 2         _______________________*/
.sec2 img {

	position: relative;
	margin: auto;
	height: 80vh;
	transition: 3s;
}

.sec2 {	
	background-color: white;
}

.sec2 div{
	position: absolute;
	display: flex;
	text-align: center;
	align-items: center;
	top: 0;
	bottom: 0;
	left: 10%;
	width: 300px;
	opacity: 0%;
	z-index: 89;
}

 .sec2.show-animate img {
	transform: translateX(500px);
	
	transition: 3s;
}

 .sec2.show-animate div {
	opacity: 100%;
	
	transition: 3.5s;
}

/*____________________________________________________        Section 7        _______________________*/

.sec7 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 50px;
}

#logo {
	width: 30vw;
	padding: 100px;
}

.sec7 div {
	width: 50vw;
}

/*____________________________________________________        Section 3         _______________________*/

.sec3 {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	height: 80vh;
	padding-top: 100px;
	
}

.sec3 img {
	position: relative;
	margin: 0px 30vw;
	width: 20vw;
	transition: 3s;
}

.sec3.show-animate img {
	transform: translateY(-80%);
	transition-delay: 3s;
	transition: 3s;
}

.plain-text {
	opacity: 0;
	position: absolute;
	top: 10;
	bottom: 10;
	margin: 0% 5%;
	text-align: center;
	line-height: 30px;
	z-index: 90;
	animation-fill-mode: both;
	transition-delay: 3s;
	transition: 2s;	
	text-align: justify;
}

.sec3.show-animate .plain-text {

	opacity: 100%;
	transition-delay: 4s;
	transition: 2s;
}

/*____________________________________________________        Section 4         _______________________*/

.sec4 {
	height: 90vh;
	position: relative;
	background-color: rgba(229,233,234,1.00);
}



.rocket-video {
	
	position:relative;
    z-index:0;
	height: 90vh;
	float: right;
}

.overlay {
   position:absolute;
    top:0;
    left:0;
	right: 0;
    z-index:90;
	width: 50%;
}


/*____________________________________________________        Section 5         _______________________*/

.sec6 {
	padding: 5%;
	width: auto;
	height: auto;
}

.blkbtn {
	width: 600px;
	height: 200px;
	height: auto;
	background-color: white;
	border: 3px solid;
	border-color: rgba(46,49,146,1.00);
	color: black;
	padding: 20px;
	border-radius: 15px;
	display: flex;
	
	font-size: 16pt;
	flex-direction: column;
	
}

.arrow {
	display: none;
	width: 50px;
	height: auto;
	float: right;
	margin: 25px 25px;
	right: 2px;

}


.left {
	margin-left: 5%;
	margin-right: auto;
}

.right {

	margin-right: 5%;
	margin-left: auto;
}

.center {
	margin: 10px auto;
}
.summary {
	display: block;
	padding: 10px;
	width: 100%;
	vertical-align:  middle;
}

.summary h1 { 
	height: auto;
	margin-left: 50px;
	display: inline-block;
	
	margin: auto;
}

.summary::before {
	content: "";
	position: relative;
	width: 40px;
	height: 40px;
	border-top: 3px solid rgba(46,49,146,1.00);
	border-right: 3px solid rgba(46,49,146,1.00);
	transform: rotate(45deg);
	float: right;
	margin-right: 50px;
}

.summary:hover + .detail, .detail:hover {
  display: block;
	padding: 100px;
	
}

.summary:hover::before {
	transform: rotate(135deg);
}


.detail {
  display: none;
}


/*____________________________________________________        Section 6         _______________________*/

.sec5 {
	height: 50vh;
}

.grid-container {
	background-color: rgba(229,233,234,1.00);
	display: grid;
	height: 10%;
	padding: 5% 0;
	align-content: center;
	justify-content: center;
	grid-template: "grid-row grid-row grid-row" 20%
						"left center right" 450px /325px 325px 325px;
    grid-gap: 5%;
    gap: 5%;
    z-index: 90;
}

.grid-cell {
	background-color: white;
	display: flex;
	border-top: 6px solid;
	border-top-color: rgba(46,49,146,1.00);
	font-size: 24pt;
	font-weight: 100;
	padding: 5%;
	flex-direction: column;
	
}
.grid-row {
	grid-area: grid-row;
		align-items: center;
	justify-content: center;
}

.grid-container-left {
	grid-area: left;
	display: block;
}

.grid-container-center {
	grid-area: center;
	display: block;
}

.grid-container-right {
	grid-area: right;
	display: block;
}


.grid-cell p {
	width: 100%;
	height: 300px;
	font-size: 12pt;
	display: block;

}

/*____________________________________________________       Footer       _______________________*/

footer {
	width: 100%;
	bottom: 0;
	left: 0;
	display: flex;
	padding: 0 5%;
	background-color: rgba(229,233,234,1.00);
	height: 100px;
	position: absolute;
	
}

.about {
	margin-top: 120px;
	height: auto;
	display: block;

}

.profile {
	padding: 5%;
	margin-left: 5%;
	width: 50vw;
	float: left;
	text-align: justify;
	text-justify:inter-word;
}


.portrait {
	float: right;
	width: 20vw;
	height: auto;
	padding: 5%;
	transition: transform 2s;
	margin: auto;
}

/*.portrait:hover {
	transform: rotate(20deg);
}*/

/*----------------------------Contact Form ----------------*/

.sec-contact {
	
	height: 85vh;
	margin: 0;
	padding: 130px;
	background-color: white;
	position: relative;

}


@keyframes appear {
	0% {opacity: 0}
	100% {opacity: 100}
}

@keyframes moving {
	0% {transform: translateX(0)}
	100% {transform: translateX(40vW)}
}

/*_________________________________________________________________ MEDIA small _____________________________________________________*/
/*_________________________________________________________________ MEDIA small _____________________________________________________*/

	
@media (max-width:400px){
	
	body {
	max-width: 100%;
	overflow-x: hidden;
}

	 h1{
		font-size: 18pt;
	}
	
		h2 {
		font-size: 16pt;
	}

	
	/*-------------------------------- header------*/
	
	
		header {
		height: 80px;
	}
	
	
	 .nav-menu {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: rgba(39,39,39,1.00);
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
		 padding-right: 0;
    }
	
	  .nav-menu.active {
        left: 0;
    }
	
	    .nav-item {
        margin: 2.5rem 0;
    }

    .hamburger {
        display: block;
       cursor: pointer;
		z-index: 999;
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
    }


	
	.logo {
	width: 120px;
	margin-left: 10px;

	}
	
	.logo a img {
		width: 120px;
	}
	
	/*----------------- Sections ----------*/
		
		.sec1 {
		background-color: black;
		height: 80vh;
		z-index: 90;
	}
	
		.main-video {
		width: auto;
		height: 90%;
			margin: auto;
	}
	
	.overlay-one {
		margin-top: 0px;
		width: 80%;
	}
	
	.video-caption h1 {
		font-size: 16pt;
	}
	
	.sec2 img {
		position: relative;
		width: 100vw;
		height: auto;
		transition: 3s;
	}
	
	.sec2.show-animate img {
		transform: translateY(-50%);
	
		transition: 3s;
	}
	.sec2 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90vh;
	}
	
	.sec2 div{
		display: flex;
		position: absolute;
		margin:auto auto 0 auto;
		width: 50%;
		height: 50%;
		left: 0;
		right: 0;
		opacity: 0%;
		z-index: 99;
	}
	
	#logo {
		width: 50vw;
		padding: 50px;
}
	
	.sec7 div {
		width: 90vw;
		text-align: justify;
}

	
	.sec3 {
		display: flex;		
		min-height: 100vh;
		height: auto;
	}
	

	.sec3.show-animate img {
		opacity: 0;
		transition: 3s;
	} 
	
	.sec4 {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
	}
	
	.overlay {
   		position:absolute;
    	margin: auto;
   	 	z-index:90;
		width: 60%;
		height: 100%;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		flex-direction: column;
}

	
	.grid-container {
		background-color: rgba(230,230,230,1.00);
		display: grid;
		height: 1050px;
		padding: 8% 5%;
		align-content: center;
		justify-content: center;
		grid-template: "grid-row" auto
						"left" 250px
						"center" 300px
						"right" 300px;
    	grid-gap: 3%;
    	gap: 3%;
    	z-index: 90;
}
	
	.grid-cell {
		margin: 10px auto;
		width: 90%;
		padding: 0 10px;
	}
	
	
	.rocket-video {
		width: 100vw;
		overflow-x: clip;
}
	
	.blkbtn {
		width: 80%;
		align-content: center;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	
	.summary:hover + .detail, .detail:hover, .summary:active + .detail, .detail:active {
  		display: flex;
		padding: 50px;
		}
	
	.summary::before {
		margin-right: 20px;
	}
	
	.left {
		margin-left: auto;
		margin-right: auto;
}

	.right {

		margin-right: auto;
		margin-left: auto;
}

.center {
		margin: 10px auto;
}

	

	
	.summary h1 {
		margin-left: 25px;
		font-size: 14pt;
	}
	
	
	
	.arrow {
		margin: 10px 20px;
	}
	
	.detail {
		width: 80%;
		font-size: 10pt;
	}
	


.about {
	flex-direction: column;
}

	.portrait {
		float: none;
		width: 50%;
	}
	
	.profile {
		float: none;
		width: 80vw;
	}
}

@media (min-width:401px) and (max-width:870px){
	
		body {
	max-width: 100%;
	overflow-x: hidden;
}
	
	header {
		height: 80px;
	}
	
	.site-head {
	display: block;
    z-index: 100;
    padding:10px 0;

}

		
	 .nav-menu {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: rgba(39,39,39,1.00);
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
		 padding-right: 0;
    }
	
	  .nav-menu.active {
        left: 0;
    }
	
	    .nav-item {
        margin: 2.5rem 0;
    }

    .hamburger {
        display: block;
       cursor: pointer;
		z-index: 999;
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
    }


	
	.logo {
	width: 120px;
	margin-left: 10px;

	}
	
	.logo a img {
		width: 120px;
	}
	
	
		.sec1 {

		background-color: black;
		height: 80vh;
		z-index: 90;
	}
	
		.main-video {
		width: auto;
		height: 90%;
			margin: auto;
	}
	
	.overlay-one {
		width: 80%;
	}
	
	.sec2 img {
	position: relative;
	height: 20vh;
	transition: 3s;
}
	
	.sec2.show-animate img {
	transform: translateY(-50%);
	
	transition: 3s;
}
	.sec2 {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 90vh;
	}
	
	.sec2 div{

	display: flex;

		position: absolute;

		margin:auto auto 0 auto;
		width: 50%;
		height: 50%;
		left: 0;
		right: 0;
		opacity: 0%;
		z-index: 99;
}
	
	.sec3 {
		display: flex;		
		min-height: 100vh;
		height: auto;
	}
	

	.sec3.show-animate img {
	
	opacity: 0;
	
	transition: 3s;

	} 
	
	.sec4 {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
	}
	
	.overlay {
   position:absolute;
    margin: auto;
    z-index:90;
	width: 60%;
		height: 100%;
			display: flex;
	text-align: center;
	align-items: center;
		justify-content: center;
		flex-direction: column;
}

	
	.grid-container {
	background-color: rgba(230,230,230,1.00);
	display: grid;
	height: 1100px;
	padding: 5% 10%;
	align-content: center;
	justify-content: center;
	
	grid-template: "grid-row" auto
						"left" 250px
						"center" 300px
						"right" 300px;
    grid-gap: 3%;
    gap: 3%;
    z-index: 90;
   /*	min-width: 320px; */

}
	
	.grid-cell {
		margin: 10px auto;
		width: 80%;
		padding: 0 20px;
	}
	
	
	.rocket-video {
	width: 90vw;
}
	
	.blkbtn {
		width: 80%;
		align-content: center;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	
	.summary:hover + .detail, .detail:hover, .summary:active + .detail, .detail:active {
  display: flex;
	padding: 50px;
}
	
		.summary h1 {
		margin-left: 25px;
		font-size: 16pt;
	}
	
	.summary::before {
		margin-right: 20px;
	}
	
	
	.left {
	margin-left: auto;
	margin-right: auto;
}

.right {

	margin-right: auto;
	margin-left: auto;
}

.center {
	margin: 10px auto;
}

	.about {
	flex-direction: column;

}

	.portrait {
		float: none;
		width: 50%;
	}
	
	.profile {
		float: none;
		width: 80vw;
	}
	
}