*{
	box-sizing: border-box;
	font-family: arial;
	margin: 0;

}
.padre{
background: linear-gradient(90deg, #fff 10%, #00009c 50%);
	height:170px;
	display: flex;
	flex-flow: column nowrap;
}
.padre2{
background: rgb(0,0,0,0.5);
	height:170px;
	display: flex;
	flex-flow: column nowrap;
	border-radius: 15px;
	width: 100%;
	margin: auto;



}
	.header{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;	
	}
		.logo1{
			flex: 1 1 auto;
			text-align: center;
		}
			.logo2 img{
				display: none;
				width: 200px;
    			height: 170px;
			}
		.logo2{
			flex: 1 1 auto;
			text-align: center;
		}
			.logo1 img{
				width: 130px;
    			height: 165px;
			}
		.titulo-principal{
			flex:4 1 auto;
			color: #f9ff21;
			text-shadow: -2px 2px 0px #000000;
			text-align:center;
			font-size:18px;
			}
			.titulo-principal h1{
				padding: 0;
				margin: 0;
			}
			.titulo-principal h2{
				padding: 0;
				margin: 0;
			}


@media all and (max-width: 360px) {
.padre{
	background: linear-gradient(90deg, #fff 10%, #00009c 50%);
	height:80px;
	display: flex;
	flex-flow: column nowrap;
}
	.logo2 img{
		width: 80px;
   		height: 64px;
			}
	.logo1 img{
		width: 70px;
    	height:80px;
			}
	.titulo-principal{

		font-size:10px;	
		}
			}

@media all and (max-width:420px) {
.padre{
	background: linear-gradient(90deg, #fff 10%, #00009c 50%);
	height:90px;
	display: flex;
	flex-flow: column nowrap;
}
	.logo2 img{
		width: 80px;
   		height: 64px;
			}
	.logo1 img{
		width: 60px;
    	height:80px;
			}
	.titulo-principal{

		font-size:10px;	
		}
			}