@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

html, body, p, textarea, input, span:not(.vjs-icon-placeholder)  {
    font-family: 'Montserrat', sans-serif!important;
    --ion-font-family: 'Montserrat', sans-serif!important;

}
#baricon {
	height:20px;
	width: auto;
}


body {
	margin: 0px;
}

.sidebarmenu {
	list-style-type: none;
	color: green;

}


#maincontent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(25px, auto);
max-width: 1920px;
grid-gap: 0px;
margin: 0px, auto;
grid-template-areas: 
"nav nav nav nav nav nav "
"header header header header header header "
"header header header header header header "
"main main main main main main"
"main main main main main main"
"main main main main main main"
"main main main main main main"
"main main main main main main"
"main main main main main main"
"main main main main main main"
"main main main main main main"
"section section section section section section"
"section section section section section section"
"section section section section section section"
"footer footer footer footer footer footer";
}


@media screen and (max-width: 760px){
	#maincontent {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(25px, auto);
	max-width: 760px;
	grid-gap: 0px;
	margin: 0px, auto;
	grid-template-areas:
	"nav nav nav nav nav nav " 
	"header header header header header header "
	"header header header header header header "
	"main main main main main main"
	"main main main main main main"
	"main main main main main main"
	"main main main main main main"
	"main main main main main main"
	"main main main main main main"
	"main main main main main main"
	"main main main main main main"
	"section section section section section section"
	"section section section section section section"
	"section section section section section section"
	"footer footer footer footer footer footer";
	}
}

	@media screen and (max-width: 760px){
		body {
	margin: 0px;
	background-color:white;
	max-width: 760px;

	 }

iframe {
	margin:20px;
	border:none;
}

header div {
	margin-left: 20%;
	margin-right:20%;
}


}


header{
	grid-area:header;

}
header {
	height: auto;
	margin: 0px;
	background: url("images/background1.png");
  	background-size: 100% 100%;
  	background-repeat: no-repeat;
}

header h2{
	color: #AFE1AF;	
	font-size: 2em;
}
header h3{
	color: #414141;	
}

header h4{
	color: #414141;	
}


header p {
	margin: 0%;
}

header div {
	margin-left: 15%;
	margin-right:20%;
	color: white;
}

header p{
	color: #414141;	
}

.aligned {
	display: flex;
    align-items: center;
}



.underline {
  border: 2px solid #AFE1AF;
  border-radius: 5px;
}


.hero {
	float: left;
	max-width: 50%;
	height: auto;
	margin-right: 5%;
	margin-top:10%; 
}

.template{
	float: right;
	margin-top: 20px;
	width: 150px;
}

.template:hover{
	float: right;
	margin-top: 20px;
	width: 300px;
}

 main{
 	grid-area:main;
 	
 }
 main {
	height: auto;
	margin-top: 0px;
	background-color:#414141;
  	background-size: 100% 100%;
  	background-repeat: no-repeat;

}

main h3 {
color:white;
text-align: left;
margin-top: 10px;
}


main div {
	margin-left: 20%;
	margin-right:20%;
	color: white;
}

main div img{
	float: left;
}

.portrait {
	height: 300px;
	width: auto;
	margin-left: 10px;
	margin-bottom: 30px;
	float: right;
}


 section{
 	grid-area:section;
 }

  section {
	height: auto;
	margin: 0px;
	background: url("images/background1.png");
  	background-size: 100% 100%;
  	background-repeat: no-repeat;
}


section h3 {
text-align: left;
margin-top: 10px;
color: #414141;
}


section div {
	margin-left: 20%;
	margin-right:20%;
	color: #414141;
}

section div img{
	float: left;
}

 aside{
 	grid-area:aside;
 }

 nav{
 	grid-area:nav;
 	width: 100%;
 	position:sticky;
 	background-color: #414141;
 	justify-content: center;
 }

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav ul li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


li a:hover {
  color: #AFE1AF;
}



  nav {
  	position: sticky;
  	top:0px;
    width: 100%;
 }


}


@media screen and (max-width:760px){
	

}


 footer{
 	grid-area:footer;
 }

 footer{
 	background-color: #414141;
 	color: white;
 	height: 100px;
 }

/*Header roation images*/

#rotationimages{ animation: changeBg 20s infinite; width:100%; height:100px; }
			@keyframes changeBg{
   				0%,100%  {background-image: url("images/3.jpg");}
   				25% {background-image: url("images/2.jpg");}
   				50% {background-image: url("images/3.jpg");}
   				75% {background-image: url("images/2.jpg");}
}


#rotationimages p{
	display:absolute;
	position: absolute;
	font-size: 2em;
	color: white;
	margin-left:20%;
 	margin-right: 20%;
 	text-align: center;
}


#maincontent > *{
	
	padding:0px;
}

#maincontent button {
	height: 50px;
	width: 50px;
	margin: 0px;
	border: none;
}

}

.floatright {
	display: inline-block;
}




/*mobile slide navigation bar*/


.content  {
			max-width:760px;
            display: grid;
            grid-gap:10px;
            grid-column-end: wrap;
            grid-template-columns:repeat(3,1fr);
            text-decoration: none;
     		align-content: center;
     		margin:0px;

		  }


.content  span{
		
            text-decoration: none;
            text-align: center;
            color: #414141;
            margin:15px;
     
		  }

  .content div{
    border-radius: 0.05px;
    height: 200px;
    width:220px;
    
    background-color: white;
    text-align: center;
    border-radius: 10px;
    align-items: space-evenly;
    margin-left:0px; 

}

  .content img{
    margin:10px;

}

.content div:hover{
    background-color: #AFE1AF;;
    box-shadow: 2px 2px 2px white;

}





@media screen and (max-width: 760px){
iframe {
	margin-left:0px;
	border:none;
	width: 100%;
	height: auto;

}

	}


@media screen and (max-width: 760px){
.content {
	 grid-template-columns:repeat(1,3fr);
}

	}