@charset "UTF-8";
aside, article, section, header, footer, nav {
	display: block;
}
html, body {
	margin: 0;
	padding: 0;
}
html {
	background: black;
}


body {
	width: 90%;
	background: #fff;
	margin: 2em auto 2em;
	font: 100% Arial, Helvetica, sans-serif;
	color: rgb(47,164,255);
	padding: 2%;
    position:relative;
}

h1{
	color:white;
	text-align:center;
	letter-spacing: 40px;
	
}

/* nav style*/

.header{
    margin:0 auto;
    padding:0;
    width:100%;
}

.logo{
	width:192px;
    display:block;
}

.nav-style{    
    margin:0 auto;
    padding:0;
    width:100%;}

.nav-style ul {
	width:100%;
	background: black;
	list-style-type: none;
	text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.nav-style ul li {
	display: inline-block;
    background: black;
}

.nav-style ul li a{
	text-decoration: none;
	color:white;
	text-align: center;
	display: inline-block;
	text-transform: uppercase;
	padding: 10px;
}


.nav-style ul li a:hover{
	color:pink;
}

/* nav style end*/

.clear {
	
	clear: both;	
}

pre{
	font-size:1.2em;
	padding: 1em, 0.5em;
	background:rgb(216, 233,204);
	border-bottom: 2px solid #666;
	
}

div {
	width: 150px;
	height: 200px;
	padding: 10px;
	font-weight: bold;
}
section {
	    display:flex;

	width: 80%;
    height: 0;
    padding-bottom: 50%;
	background: url("images/IMain.jpg");
	background-size: cover; 
	
	position: relative;
	margin: 2em auto 2em;
	
}
footer{
	padding: 20px 30px 10px 30px;
	color:white;
	align-content: center;
	justify-content: center;
	display:flex;
}

footer a{
	text-decoration:none;
	color:white;
}

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeAnimation {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fadeAnimation {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeAnimation {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.alpha {
	background:url("images/I1.jpg")  no-repeat;
	background-size:contain;
	position: absolute;
	width: 20%;
	margin:0;
	height:100%;
	left:2%;
	top:20%;
	opacity: .5;
	-webkit-animation: fadeAnimation 3s infinite alternate;
	-moz-animation: fadeAnimation 3s infinite alternate;
     -o-animation: fadeAnimation 3s infinite alternate;
     animation: fadeAnimation 3s infinite alternate;  
}



@-webkit-keyframes fadeAnimation2 {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}


@-moz-keyframes fadeAnimation2 {
      0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeAnimation2 {
      0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeAnimation2 {
      0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.omega{
	background: url("images/I2.jpg") no-repeat;
	background-size: contain;
	position: absolute;
	width:20%;
	margin:0;
	height: 100%;
	left: 27%;
	top: 40%;
	opacity: .5;
	-webkit-animation: fadeAnimation2 3s infinite alternate;
	-moz-animation: fadeAnimation2 3s infinite alternate;
     -o-animation: fadeAnimation2 3s infinite alternate;
     animation: fadeAnimation2 3s infinite alternate;     
}
@-webkit-keyframes fadeAnimation3 {
     0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}


@-moz-keyframes fadeAnimation3 {
      0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeAnimation3 {
     0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeAnimation3 {
     0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.gamma {
	background: url("images/I3.jpg") no-repeat;
	background-size: contain; 
	position: absolute;
	width: 20%;
	margin: 0;
    height: 100%;
	left: 53%;
	top: 20%;
	opacity: 1;
	 -webkit-animation: fadeAnimation3 3s infinite alternate;
     -moz-animation: fadeAnimation3 3s infinite alternate;
     -o-animation: fadeAnimation3 3s infinite alternate;
     animation: fadeAnimation3 3s infinite alternate;   
}

@-webkit-keyframes fadeAnimation4 {
      0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}


@-moz-keyframes fadeAnimation4 {
    0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeAnimation4 {
     0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeAnimation4 {
       0% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.delta {
	background: url("images/I4.jpg") no-repeat;
	background-size: contain;
	position: absolute;
	width:20%;
	margin:0;
	height: 100%;
	left: 78%;
	top: 40%;
	opacity: .5;
	-webkit-animation: fadeAnimation4 3s infinite alternate;
	-moz-animation: fadeAnimation4 3s infinite alternate;
    -o-animation: fadeAnimation4 3s infinite alternate;
    animation: fadeAnimation4 3s infinite alternate;     
}

/*-  MEDIA QUERIES
----------------------------------------------------------------------*/
/* Disable iOS/WinMobile font size changes */
html {
	font-size: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}


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

body {
	width: 90%;
	background: black;
	margin: 2em auto 2em;
	font: 100% Arial, Helvetica, sans-serif;
	letter-spacing: 0.075em;
	color: rgb(78,84,161);
	padding: 2%;
	
}
	
.nav-style{
		float:right;
	}
	
h1 {
    font-family: 'Nunito', sans-serif;
    font-weight: 400; 
	font-size: 3em;
		
}


section {
	width: 80%;
    height: 0;
    padding-bottom: 50%;
	background: url("images/IMain.jpg");
	background-size: cover; 
	
	position: relative;
	margin: 2em auto 2em;
	
}


}



@media screen and (max-width: 768px)
        {
	
	body {
	
	width: 95%;
	
   font: 100% Arial, Helvetica, sans-serif;
	
	margin: 2em auto 2em;
	
	padding: 2%;
	
	background-color: black;
	color: rgb(78,84,237);
			
	}
	
	.nav-style ul li {
		display: inline-block;
		
	}
	.nav-style ul{
		text-align: center;
	}
	
	h1 {
		font-size: 2.3em;
		
}



section {
	width: 90%;
    height: 0;
    padding-bottom: 50%;
	background: url("images/IMain.jpg");
	background-size: cover; 
	
	position: relative;
	margin: 2em auto 2em;
	
}
}

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

body {
	
	width: 95%;
	
	margin: 2em auto 2em;
	padding: 2%;
	
	background: black;
	text-align: center;	
	
	
	}
	
	h1 {
		font-size: 1.8em;
		letter-spacing: 0.09em;
		text-transform: uppercase; 
}



section {
	width: 95%;
    height: 0;
    padding-bottom: 50%;
	background: url("images/IMain.jpg");
	background-size: cover; 
	border-radius: 25px;
	position: relative;
	margin: 2em auto 2em;
	
}
		
}


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

body {
	
	width: 95%;
	
	margin: 2em auto 2em;
	padding: 2%;
	
	background: #B0FCBE;
		
	}
	
	
	h1 {
		font-size: 1.6em;
		
}



section {
	width: 95%;
    height: 0;
    padding-bottom: 50%;
	background: url("images/IMain.jpg");
	background-size: cover; 
	
	border-radius: 25px;
	position: relative;
	margin: 1em auto 1em;
	
}

}

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

body {
	
	width: 95%;
	
	margin: 1em auto 1em;
	
	padding: 1%;
	
	background: black;
		
	}
	
h1 {
		font-size: 1.4em;
		
}