/* styling here */
@import "custom.css";
@import "media.css";
@import "fonts.css";

.proj-div{
    text-align: center;
    font-weight: 700;
    border: 5px solid #40A1AD;
    width: fit-content;
    margin: 20px auto;
    padding: 10px 20px;
    transition: all ease 200ms;
}
.proj-div:hover{
    background: #40A1AD;
     transition: all ease 200ms;
}
.proj-div:hover a{
    color: white;
     transition: all ease 200ms;
}
.proj-div a{
    color: #40A1AD;
     transition: all ease 200ms;
}

/* TABLET */
@media (min-width: 601px) and (max-width: 992px) {
	.m-spacer150 {height: 150px;}
	.m-spacer120 {height: 120px;}
	.m-spacer90 {height: 90px;}
	.m-spacer60 {height: 60px;}
	.m-spacer30 {height: 30px;}
	.m-spacer15 {height: 15px;}

	.m-block150 {display: inline-block; width: 150px;}
	.m-block120 {display: inline-block; width: 120px;}
	.m-block90 {display: inline-block; width: 90px;}
	.m-block60 {display: inline-block; width: 60px;}
	.m-block30 {display: inline-block; width: 30px;}
	.m-block15 {display: inline-block; width: 15px;}

	.m-taleft {text-align: left;}
	.m-tacenter {text-align: center;}
	.m-taright {text-align: right;}
	.m-tajustify {text-align: justify;}
}

/* DESKTOP */
@media (min-width: 993px) and (max-width: 1200px) {
	.l-spacer150 {height: 150px;}
	.l-spacer120 {height: 120px;}
	.l-spacer90 {height: 90px;}
	.l-spacer60 {height: 60px;}
	.l-spacer30 {height: 30px;}
	.l-spacer15 {height: 15px;}

	.l-block150 {display: inline-block; width: 150px;}
	.l-block120 {display: inline-block; width: 120px;}
	.l-block90 {display: inline-block; width: 90px;}
	.l-block60 {display: inline-block; width: 60px;}
	.l-block30 {display: inline-block; width: 30px;}
	.l-block15 {display: inline-block; width: 15px;}

	.l-taleft {text-align: left;}
	.l-tacenter {text-align: center;}
	.l-taright {text-align: right;}
	.l-tajustify {text-align: justify;}
}

/* LARGE DISPLAY'S */
@media (min-width: 1201px) {
	.xl-spacer150 {height: 150px;}
	.xl-spacer120 {height: 120px;}
	.xl-spacer90 {height: 90px;}
	.xl-spacer60 {height: 60px;}
	.xl-spacer30 {height: 30px;}
	.xl-spacer15 {height: 15px;}

	.xl-block150 {display: inline-block; width: 150px;}
	.xl-block120 {display: inline-block; width: 120px;}
	.xl-block90 {display: inline-block; width: 90px;}
	.xl-block60 {display: inline-block; width: 60px;}
	.xl-block30 {display: inline-block; width: 30px;}
	.xl-block15 {display: inline-block; width: 15px;}

	.xl-taleft {text-align: left;}
	.xl-tacenter {text-align: center;}
	.xl-taright {text-align: right;}
	.xl-tajustify {text-align: justify;}
}

/* MOBILE */
@media (max-width: 600px) {
	.s-spacer150 {height: 150px;}
	.s-spacer120 {height: 120px;}
	.s-spacer90 {height: 90px;}
	.s-spacer60 {height: 60px;}
	.s-spacer30 {height: 30px;}
	.s-spacer15 {height: 15px;}

	.s-block150 {display: inline-block; width: 150px;}
	.s-block120 {display: inline-block; width: 120px;}
	.s-block90 {display: inline-block; width: 90px;}
	.s-block60 {display: inline-block; width: 60px;}
	.s-block30 {display: inline-block; width: 30px;}
	.s-block15 {display: inline-block; width: 15px;}

	.s-taleft {text-align: left;}
	.s-tacenter {text-align: center;}
	.s-taright {text-align: right;}
	.s-tajustify {text-align: justify;}
}

#sponsors {
    position: fixed;
    bottom:0;
    left: 0;
    right: 0;
    height: 60px;
    width: 100%;
    margin: auto;
    z-index: 2000;
    -webkit-box-shadow: 0px -5px 20px -4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px -5px 20px -4px rgba(0,0,0,0.3);
    box-shadow: 0px -5px 20px -4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

#sponsors div {
    height: 50px;
}

#sponsors img {
  max-height: 50px;
}