@font-face {
	font-family: "Roboto";
	src: url('/static/fonts/Roboto/Roboto-Regular.ttf')
}

/* Standard Colors */
:root {
	--bg-color: #4c4c4c
	--bg-color-light: #939393
	--bg-color-dark: #353535
	
   	--accent-color: #a11919;
    --accent-color-light: #f04745;
    --accent-color-dark: #660000;

   	--text-color: #fafafa;
    --text-color-light: #ffffff;
    --text-color-dark: #bababa;

    --error-color: #ec363a;

    --bw-media-color: #9e1a1a;
}


.h1-style {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	
}

.h2-style {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 35px;
}

.h5-style {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
}

.p-style {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
}

.p-style-big {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	letter-spacing: 1px;
}


.bwm-color {
	color: var(--bw-media-color); 
}

.bwm-bg {
	background-color: var(--bw-media-color);
}


.row ul {
	list-style: none;
	margin-left: 0px;
	margin-right: 0px;
}


.row .ul-style .li-style {
	
	width: 150px;
	height: 150px;
	border-radius: 3px;
	position: relative;
	margin: 25px 30px;
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	
}


.info {
	position: absolute;
	border-radius: 3px;
	top: 0px;
	left: 150px;
	width: 150px;
	height: 150px;
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	background-color: var(--bw-media-color);
	
	
}


.info p {
	
	margin-top: 8px;
	position: absolute;
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	font-weight: 150;
	color: #ffffff;
	
}

#svg-style {
		width: 100px;
	}

#i-style {
		font-size: 6rem;
	}


.background-image {
  background-attachment: fixed;
	}

.wrapper-grid {
	display: grid;

	}



/* Media Queries */


/* Media Queries */



@media only screen and (max-width: 1000px) and (orientation : portrait) {
	
}

@media only screen and (max-width: 960px) and (orientation : landscape) {
		.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 13.7rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {	
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 12.7rem;
	}
}

@media only screen and (max-width: 915px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 912px) and (orientation : portrait) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 13.7rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {	
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 12.7rem;
	}
}

@media only screen and (max-width: 896px) and (orientation : landscape) {
	
}

@media only screen and (max-width: 854px) and (orientation : landscape) {
	
}

@media only screen and (max-width: 823px) and (orientation : landscape) {
	
}



@media only screen and (max-width: 820px) and (orientation : portrait) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 13.7rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {	
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 12.7rem;
	}
}

@media only screen and (max-width: 800px) and (orientation : portrait) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 13.7rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {	
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 12.7rem;
	}
}

@media only screen and (max-width: 786px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 768px) and (orientation : portrait) {
	
}

@media only screen and (max-width: 745px) and (orientation : landscape) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 8rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 7rem;
	}
}

@media only screen and (max-width: 740px) and (orientation : landscape) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 8rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 7rem;
	}
}

@media only screen and (max-width: 712px) and (orientation : portrait) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 8rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 7rem;
	}
}


@media only screen and (max-width: 667px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 658px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 640px) and (orientation : landscape) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 8rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 7rem;
	}
}


@media only screen and (max-width: 600px) and (orientation : portrait) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 8rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
	#image-style {
		margin-left: 7rem;
	}
}

@media only screen and (max-width: 568px) and (orientation : landscape) {

	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 9rem;
}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
	
}

@media only screen and (max-width: 540px) and (orientation : portrait) {
	
}

@media only screen and (max-width: 533px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 480px) and (orientation : portrait) {
		
    .row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 5.5rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}

	.info p {	
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
}

@media only screen and (max-width: 480px) and (orientation : landscape) {
	 .row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 6.7rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}

	.info p {	
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	
	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
}


@media only screen and (max-width: 414px) and (orientation : portrait) {
	.row .ul-style .li-style {
	
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 4.2rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}


	.info p {


		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;

	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
}

@media only screen and (max-width: 393px) and (orientation : portrait) {
	.row .ul-style .li-style {
		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 3.7rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;
	}
	#svg-style {
		width: 90px;
	}
	

}

@media only screen and (max-width: 375px) and (orientation : portrait) {
	.row .ul-style .li-style {

		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 3.2rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;

	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
}


@media only screen and (max-width: 360px) and (orientation : portrait) {
	.row .ul-style .li-style {

		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 45px;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;

	}
	#svg-style {
		width: 90px;
	}
	
	#i-style {
		font-size: 5.5rem;
	}
}

@media only screen and (max-width: 320px) and (orientation : portrait) {
	.row .ul-style .li-style {

		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 1.6rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}


	.info p {


		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;

	}
	#svg-style {
		width: 90px;
	}
	

}

@media only screen and (max-width: 320px) and (orientation : landscape) {
	.row .ul-style .li-style {

		width: 140px;
		height: 140px;
		border-radius: 3px;
		position: relative;
		margin-left: 1.6rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 140px;
		width: 140px;
		height: 140px;
	}


	.info p {


		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 17px;

	}
	#svg-style {
		width: 90px;
	}
}

@media only screen and (max-width: 280px) and (orientation : portrait) {
	.row .ul-style .li-style {

		width: 130px;
		height: 130px;
		border-radius: 3px;
		position: relative;
		margin-left: 1rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 130px;
		width: 130px;
		height: 130px;
	}


	.info p {


		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 15px;

	}
	#svg-style {
		width: 75px;
	}
	
	
	#i-style {
		font-size: 4.5rem;
	}
}

@media only screen and (max-width: 240px) and (orientation : portrait) {
	.row .ul-style .li-style {

		width: 120px;
		height: 120px;
		border-radius: 3px;
		position: relative;
		margin-left: 0.5rem;
	}


	.info {
		position: absolute;
		border-radius: 3px;
		top: 0px;
		left: 120px;
		width: 120px;
		height: 120px;
	}


	.info p {
		margin-top: 5px;
		position: absolute;
		text-align: center;
		font-weight: 100;
		font-size: 15px;

	}
	#svg-style {
		width: 75px;
	}
	
	#i-style {
		font-size: 4.5rem;
	}
	
}