html {
	height: 100%
}
.all {

	background: url(pic.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;

	z-index: 12;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


.all::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(top,rgba(108,91,123,0.8) 0,rgba(53,92,125,0.8) 100%);
    background-image: -o-linear-gradient(top,rgba(108,91,123,0.8) 0,rgba(53,92,125,0.8) 100%);
    background-image: linear-gradient(to bottom,rgba(96, 119, 183, 0.8) 0,rgba(6, 62, 111, 0.8) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc6c5b7b',endColorstr='#cc355c7d',GradientType=0);
    content: "";
    z-index: -1;
}


.logo {
	top: calc(50% - 100px);
	position: absolute;
	left: calc(50% - 250px);
	z-index: 12;
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
	.logo {
		position: static;
		text-align: center;
		padding: 20px;
	}

	.logo img {
		width: 100%;
		margin: 0 auto;
		margin-top: 16.2vh;
		z-index: 200;
	}

	.logo p {
		font-size: 22px !important;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 620px) {
	.logo {
		position: static;
		text-align: center;
		padding: 20px;
	}

	.logo img {
		width: 100%;
		margin: 0 auto;
		margin-top: 22vh;
		z-index: 200;
	}

	.logo p {
		font-size: 22px !important;
	}
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}