html {
  font-size: 12px;
}

@media screen and (min-width: 576px) {
  html {
    font-size: 13px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 992px) {
  html {
    font-size: 18px;
  }
}
@font-face {
    font-family: 'bvbweb';
    src: url('RaphaelStd.ttf');
}
@font-face{
    font-family: 'kavoon';
    src: url('Skranji-Regular.ttf');
}
@font-face{
    font-family: 'styleScript';
    src: url('StyleScript-Regular.ttf');
}
.raphaelfont {
    font-family: 'bvbweb', serif;
}

.kavoon-regular {
  font-family: "kavoon", serif;
}

.styleScript {
  font-family: "styleScript", cursive;
}

.text-img {
	float: left;
	margin: 5px 15px 15px 5px;
}


.hr-line{
	display:inline-block;
	z-index:41;
	background-color:#ff0000;
	height:4px;
}

.d-menu{
	background-color: rgba(206, 53, 44, 0.7) !important;
	color:white;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}

.sticky + .content {
  padding-top: 40px;
}

.topnav .hamburger {
  display: none;
}

@media screen and (max-width: 576px) {
	.no-visible-s{
		display: none !important;
	}
	
}

@media screen and (max-width: 960px) {
  .app-bar .app-bar-menu>li>a {
	  font-size:0.660rem;
	  padding: 0 10px;
  }
  .app-bar-expand .app-bar-menu .d-menu a, .app-bar-expand .app-bar-menu .d-menu li {
    height: 32px;
    line-height: 32px;
	font-size:0.660rem;
  }
}
@media screen and (max-width: 768px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav .hamburger {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .hamburger {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
}


.slide {
  /*Parallax*/
  /* Set a specific height */
  /*min-height: 400px; */

  /* Create the parallax scrolling effect */
  /*background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
}


.parallax {
  /*Parallax*/
  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.dropdown-toggle::before {
    border-color: #ffffff !important;
}

#SlideShow1 .image
{
   border-width: 0;
   border-radius: 0px;
   display: block;
   float: left;
   height: 214px;
   width: auto;
}
#SlideShow1 li
{
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
}
#SlideShow1
{
   display: inline-block;
   position: relative;
   list-style: none;
   width: 100%;
   height: 214px;
   padding: 0;
   margin: 0;
}
#wb_LayoutGrid2
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid2
{
   box-sizing: border-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: 0;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid2 > .col-1
{
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid2 > .col-1
{
   -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
}
#LayoutGrid2 > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   flex-basis: 100%;
   max-width: 100%;
   display: -webkit-flex;
   -webkit-flex-wrap: wrap;
   -webkit-align-content: flex-start;
   -webkit-align-self: stretch;
   -webkit-align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   align-self: stretch;
   align-items: flex-start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   text-align: left;
}
@media (max-width: 480px)
{
#LayoutGrid2 > .col-1
{
   -webkit-flex-basis: 100% !important;
   flex-basis: 100% !important;
   max-width: 100% !important;
}
}

#SlideShow2 .image
{
   border-width: 0;
   border-radius: 0px;
   display: block;
   float: left;
   height: 214px;
   width: auto;
}
#SlideShow2 li
{
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
}
#SlideShow2
{
   display: inline-block;
   position: relative;
   list-style: none;
   width: 100%;
   height: 214px;
   padding: 0;
   margin: 0;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  animation: changeBackgroundColor 7s infinite;
}

@keyframes changeBackgroundColor {
  0% {
    background-color: #001F3F;
  }
  50% {
    background-color: #FF4136;
  }
  100% {
    background-color: #001F3F;
  }
}

.footerimg{
	background-image: url('../images/footer-bg.jpg');
	background-repeat: no-repeat;
}
.app-bar{
  list-style-type:none;
  display:flex;
  justify-content: center;
 }
 .bg-tomatoes {
  background-image: linear-gradient(to bottom right, #ce352c, #b90a00) !important;
}
.wheat {
  background: wheat;
}
.sl-overlay {
	background:  #000 !important;
}
.sl-wrapper .sl-navigation button {
	color: #fff !important;
}
.sl-close, .sl-counter {
	color: #fff !important;
}
.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.zoom-out {
	overflow: hidden;
	cursor: pointer;
	background-position: center;
	background-size: cover;
	margin:5px;
	transition: all 0.5s ease-in-out;
}
.zoom-out:hover {
	transform: scale(0.9);
}
#SlideShow1 li.image:hover {
  transform: scale(0.5) !important;
}
.footer-geeks {
	background-image:
		linear-gradient(90deg,
			rgba(206, 53, 44, 0.75),
			rgba(86, 0, 20, 0.75)), 
			url(../images/footer-bg.jpg);
	width: 100%;
}

.cartoon-bg {
	background-image:
		linear-gradient(90deg,
			rgba(245, 70, 66, 0.75),
			rgba(8, 83, 156, 0.75)), 
			url(../images/cartoon-bg.jpg);
	width: 100%;
	height: 280px;
	text-align: center;
	color: #fff;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.students-bg {
	background-image:
		linear-gradient(90deg,
			rgba(245, 70, 66, 0.75),
			rgba(8, 83, 156, 0.75)), 
			url(../images/students-bg.jpg);
	width: 100%;
	height: 280px;
	text-align: center;
	color: #fff;
}
/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}