/* ---------------------- ITNOVA HOME CSS ---------------------- */

/* -- REMOVAL OF DEFAULT PADDING, MARGIN & LIST STYLE -- */

*{
	margin: 0px; padding: 0px;
	list-style-type: none; text-decoration: none;
}
html{
	position: relative;	scroll-behavior: smooth;
}

@font-face {
    font-family: impact; src: url(IMPACT.ttf);
}
@font-face {
    font-family: msyi; src: url(MSYI.ttf);
}

h1{
	margin: 5px 25px; font-family: impact; font-weight: 400;
	letter-spacing: 1.5px; font-size: 24pt;
}
h2{
	font-family: msyi; font-size: 18pt;
	font-weight: 400;
}
p, b {
	font-family: msyi; font-size: 14pt; font-weight: 400;
	letter-spacing: .5px;
}
a {
	font-family: msyi; font-size: 14pt; font-weight: 400;
	letter-spacing: .5px; cursor: pointer; transition: .3s;
}
a:hover {
	color: orange; transition: 0s;
}

nav{
	height: 100px; background-color: rgba(0,0,0,.7);
}
nav img{
	height: 100px;
}
nav a{
	height: 100px;
	padding: 25px; color: white;
}

select {
	width: 150px; height: 35px; padding: 5px 25px; font-family: msyi;
	font-size: 14pt; border: none; background-color: rgb(225,225,225);
}
select option{
	font-size: 14pt; height: 45px; display: block;
}


/* -------- MYSLIDES STYLE -------- */

.myslides {
	height: 35vh; padding: 20vh 0 0 0; min-height: 300px;
	background-size: cover; background-repeat: no-repeat; background-position: center;
	transition: .3s;
}

.myslides h1, .myslides p{
	margin: 0 25%; padding: 10px 50px 0 50px;
	color: white; background-color: rgba(0,0,0,0.6);
}
.myslides p {
	padding: 0 50px 10px 50px; font-size: 18pt;
}

.myslides a {
	margin: 0 25%; padding: 10px 50px; color: white;
	background-color: rgba(254,144,0,0.8);
	transition: .2s; float: left;
}
.myslides a:hover {
	background-color: rgb(254,144,0);
}

.myslides:nth-of-type(1) {
	background-image: url('HOMEPAGE.jpg');
}
.myslides:nth-of-type(2) {
	background-image: url('IMAGES/HOMEPAGE.jpg');
}
.myslides:nth-of-type(3) {
	background-image: url('IMAGES/HOMEPAGE.jpg');
}


/* -------- HIGHLIGHTS/OPTIONS STYLE -------- */

.highlights {
	width: 1156px; padding: 0 calc(50% - 578px);
	background-color: rgb(240,240,240); text-decoration: none;
}
.options {
	width: 350px; margin: -60px 15px 15px 15px; outline: none;
	border: solid .5px rgba(220,220,220,.6); display: inline-block;
	cursor: initial;
}
.options img{
	width: 100%;
}
.options:hover {
	/*border: solid .5px rgba(254,144,0,0.7);*/
}

.optext h2, .optext p {
	padding: 10px 15px; color: black;
}
.optext h2 {
	color: rgb(254,144,0);
}
.optext {
	padding: 0 0 20px; background-color: white;
	transition: .2s;
}
.options:hover .optext {
	/*box-shadow: 0px 0px 10px rgb(180,180,180); background-color: rgb(250,250,250);*/
}

.media {}

.media img {
	height: 250px;
}

.additions {
	background-color: lightgreen;
}


/* --------------------------- MOB SIZED SCREENS -------------------------- */

@media screen and (max-width:680px){
	
nav{
	height: 50px;
}
nav img{
	height: 50px;
}

.myslides {
	height: 200px; min-height: auto; padding: 75px 0 0 0;
}

.myslides h1, .myslides p{
	margin: 0; padding: 10px 20px 0 20px;
}
.myslides h1 {
	font-size: 18pt;
}
.myslides p {
	padding: 0 20px 10px 20px; font-size: 14pt;
}
.myslides a {
	margin: 0 25%; padding: 10px 50px; color: white;
	background-color: rgba(254,144,0,0.8);
	transition: .2s; float: left;
}

.highlights {
	width: 100%; padding: 0;
	overflow: auto; white-space: nowrap;
}
.options {
	width: calc(100% - 70px); margin: 25px 10px;
}
.optext h2, .optext p {
	white-space: normal;
}
	
}