@font-face {
		font-family:first;
		src: url("../fonts/knewave-regular.ttf");
	}
body {
	color:#e3d0fb;
	
	background:DarkBlue;
	
}

.dropDown{
	width:200px;
	background-color:blue;
	
	 text-align:center;
	padding: 0;
}
.dropDown > li > a{
	color:purple;
}

.dropDown > li > div {
	display:none;
}

.boxInfo{
	
}

.dropDown > li:hover > div {
	
	
width:180px;
	text-align:center;
	padding:10px;
	list-style-type:none;
	display:block;
	position:absolute;
	background-color: #B19CD9;
	z-index:1;
	
	
}

.dropDown > li {
	border: 5px solid purple;
	margin:0;
	width:200px;
	background-color:black;
	text-align:center;
	position:relative;
	padding:10px;
	list-style-type:none;
}
#center{
	margin:auto;

	display:block;
	text-align:center;
}
.centerSpecial{
	width:100px;
	justify-content:center;
	text-align:center;
	margin-left:40%;
	  padding-right:5%;
}
.paddingRight{
	padding-right:50%;
}

#centerSpecia{
	
}
#left{
	
}
hr {
	color: green;
}
form{
	

}
img, video {
   max-width:100%;
   height:auto;
}


img {
	padding-bottom:10px;
}

.flex{
	margin:20px;
	display:block !important;
}
.flex2{
	
	display: none !important;
}
.center{
		margin:auto;

	display:block;
	text-align:center;
}


.extrapaddingb100{
	padding-bottom:100px;
}

.border1{
	
	border:5px purple solid;
	width:300px;
	clear:both;
	padding-left:10px;
	padding-right:10px;
}
.logo4{
	width:99px;
	float:none;
}
.title{
			font-family: first,sans-serif;
}
.secondExternal{
	display:none !important;
}
.border2{
	border:5px orange solid;
	width:300px;
	padding-left:10px;
	padding-right:10px;
}

.border3{
	border:5px red solid;
	width:300px;
	padding-left:10px;
	padding-right:10px;
}

.border4{
	border: 5px yellow solid;
	width:300px;
	padding-left:10px;
	padding-right:10px;
}
@media screen and (min-width:768px) { 
    .logo4{
		width:199px;
		
	}

	h1 {
		font-size:20px;
	}
	h6{
		font-size:10px;
	}
	.border1{
		border:5px purple solid;
		width:500px;
		clear:both;


	}
	.border2{
		border:5px orange solid;
		width:500px;
	height:400px;
		padding-left:10px;
		padding-right:10px;
	}
	.border3{
		border:5px red solid;
		width:500px;
		height:400px;
		padding-left:10px;
		padding-right:10px;
	}
		
	.border4{
		border: 5px yellow solid;
		width:500px;
		height:550px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.flex2{
		margin:20px;
		display:flex  !important;
		align-items: stretch;
	}
	.flex {
		 display:none !important;
	}
	.secondExternal{
		display:block !important;
	}
}

/* 3: Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.logo4{
		width:299px;
		
	}
	h1 {
		font-size:40px;
	}
	h6{
		font-size:10px;
	}
	.border1{
		border:5px purple solid;
		width:600px;
		clear:both;
				
	}
	.border2{
		border:5px orange solid;
		width:600px;
		height:330px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.border3{
		margin:1px;
		border:5px red solid;
		width:600px;
		height:330px;
		padding-left:10px;
		padding-right:10px;
		
	}
	
	.border4{
		border: 5px yellow solid;
		width:600px;	
		height:330px;
		padding-left:10px;
		padding-right:10px;
				
	}
	
	.flex2{
		margin:20px;
		display:flex  !important;
		align-items: stretch;
	}
	.flex{
		display:none !important;
	}
	.secondExternal{
		display:block !important;
	}
}

/* 4: Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.logo4{
		
		width:399px;
	}	
	h1 {
		font-size:60px;
	}
	h6{
		font-size:20px;
	}
	.border1{
		border:5px purple solid;
		width:800px;
		clear:both;	
	}
	
	.border2{	
		border:5px orange solid;
		width:700px;
		padding-left:10px;
		padding-right:10px;	
		height:475px;
	}

	.border3{
		position:relative;
		padding-left:10px;
		padding-right:10px;
		height:475px;
		border:5px red solid;
		width:700px;
	}
	
	.flex2{
		display:none !important;
	}
	.flex{
		margin: 20px;
		display:flex  !important;
		align-items: stretch;
	}
		
	.border4{

		position:relative;
		clear:right;
		border: 5px yellow solid;
		width:750px;
		height:475px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.secondExternal{
		display:none !important;
	}

}