/* Media queries. Framework already has many rules for responsiveness. Just adding rules for 3d row (aside)
to be hidden on smaller screen devices. */

@media only screen {
	aside {display: none;}

}

@media only screen and (min-width: 960px) {
	aside {display: block;}

}
@media only screen and (min-width: 1400px) {
	iframe {margin: auto; width: 70%;}


}

@media only screen and (max-width: 600px) {
	.uk-card-body {padding: 20px 20px;}
}

#logo {
	width: 75px;
	border-radius: 8px;
}

#main {
	margin: 20px;
}

#content {
	padding-left: 0;
}

#middle {
	padding-left: 0;
}
#middle > h2 {
	text-align: center;
	padding-top: 10px;
}

#middle-info {
	padding: 0px 20px 20px 20px;
} 

#middle-img {
	max-width: 100%;
}

#myiframe {
	padding: 0;
  	list-style: none;
}
#myiframe > li:nth-child(n+2),
#myiframe > li > ul {
  	margin-top: 20px;
}

#totop {
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	display: none;
}

#mynav {
	background: #e9ece5;
	font-size: 1.2em;
}

#contactimg {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    margin-left: auto;
  	margin-right: auto;
  	margin-top: 15%;
	box-shadow: 2px 2px 4px #aaa;
}

#drdwn {
	padding: 0;
}

#drdwn-menu {
	background-color: #f9f9f9;
}

#drdwn-menu a {
	padding: 10px 0px 10px 12px;
} 

#drdwn-menu a:hover {
	background-color: #f1f1f1;
	color: #f0506e;
}

#myfooter {
	clear: both;
	text-align: center;
	background: #f8f8f8;
}
#mob-title {
	text-align: center;
	font-weight: bold;
}

#content-image {
	position: center;
	max-width: 95%;
	height: auto;
}


iframe {
	height: auto;
} 


aside {
	border-left: 1px solid #e5e5e5;
	text-align: center;
}

h3 {
	text-align: center;
}

body {
	background-image: url(../images/website-background.jpg);
}

/*Found solution for sticky footer. If there is not enough content on the page, footer still stick in the bottom. */

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.uk-offcanvas-content {
  flex: 1;
}