/* 
 Theme Name:     PLATO v2.0 Theme
 Author:         Blue Apple Education
 Author URI:     http://www.blueappleeducation.com 
 Template:       Divi
 Version:        2.0 
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/* headings */
h1 {
  font-size: 40px!important;
}
h2 {
  font-size: 34px!important;
}
h3 {
  font-size: 32px!important;
}
h4 {
  font-size: 22px!important;
}
@media only screen and (max-width: 1220px) {
	h1 {
  font-size: 38px!important;
}
h2 {
  font-size: 32px!important;
}
h3 {
  font-size: 28px!important;
}
h4 {
  font-size: 18px!important;
} 
	body {
  font-size: 16px!important;
} 
} 
@media only screen and (max-width: 640px) {
	h1 {
  font-size: 32px!important;
}
h2 {
  font-size: 28px!important;
}
h3 {
  font-size: 24px!important;
}
h4 {
  font-size: 18px!important;
} 
	body {
  font-size: 16px!important;
} 
} 
/* headings END */

/*image gallery item aspect ratio square 1:1*/
.pa-image-gallery-1-1 .et_pb_gallery_image {
  padding-top: 100%;
  display: block;
}
.pa-image-gallery-1-1 .et_pb_gallery_item img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
/*image gallery item aspect ratio landscape 16:9*/
.pa-image-gallery-16-9 .et_pb_gallery_image {
  padding-top: 56.25%;
  display: block;
}
.pa-image-gallery-16-9 .et_pb_gallery_item img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
/*image gallery item aspect ratio portrait 9:16*/
.pa-image-gallery-9-16 .et_pb_gallery_image {
  padding-top: 177.77%;
  display: block;
}
.pa-image-gallery-9-16 .et_pb_gallery_item img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

#wpadminbar .quicklinks .menupop ul li a {
  color: #666666!important;
}

.et_pb_menu__search-button:after {
	content: "\55";
	    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
	font-weight:900!important;
}

/*popup close button*/
.area-outer-wrap[data-da-color="light"] .da-close {
  color: #fff!important;
  border-radius: 20px!important;
  margin: 10px!important;
}
/*END popup close button*/

/* Main menu search */
.et_pb_menu .et_pb_menu__search {
  border-radius: 50px;
  padding-left: 10px;
	margin-left:10px
}
.et_pb_menu__close-search-button, .et_pb_menu__search input, .et_pb_menu__search input::placeholder, .et_pb_menu__search .et_pb_menu__search-form .et_pb_menu__search-input {
	color: white !important;
	opacity:1!important;
}
/* END Main menu search */

/* ----------- SIDEBAR EDITS -------------------------------------------------------------------- */ 
.advanced-sidebar-menu ul ul ul {
padding: 0 0 0 1px !important;
}

svg.advanced-sidebar-icon {
position: absolute;
right: 4px;
}

.child-sidebar-menu{
	padding: 10px 10px 10px 15px;}

.child-sidebar-menu li a:hover{
		padding: 10px 10px 10px 15px;
		width: 100%;
    height: auto;
    display: block;
    float: left;
		transition: all .5s ease-in-out;
    text-decoration: none;
    text-align: left;
    color: #6f6f6f;
    word-break: keep-all;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}

.child-sidebar-menu li a{
		padding: 10px 10px 10px 10px;
		width: 100%;
    height: auto;
    display: block;
    float: left;
	  border-bottom: 2px solid #eee;
    color: #333;
    font-size: 16px;
    line-height: 26px;
}

.et_pb_widget ul li ul li {
    margin-left: 0px;
}
.grandchild-sidebar-menu li a{
		padding: 10px 10px 10px 20px!important;
}
.grandchild-sidebar-menu li a:hover{
		padding: 10px 10px 10px 25px!important;
}

/* ----------- SIDEBAR EDITS END-------------------------------------------------------------------- */ 



 



/* ----------- LAST DROPDOWN LEFT -------------------------------------------------------------------- */ 
/*Shows last menu item drop down within the page*/
.drop-menu ul {
right: 0px !important;
}
/* ----------- LAST DROPDOWN LEFT END -------------------------------------------------------------------- */ 



/* ----------- MENU EDIT -------------------------------------------------------------------- */
.nav li ul {
	width: 300px;
}
.et-menu li li a {
    width: 300px;
}

.nav li li {
    padding: 0 0px;
}
.nav li li:hover {
	transition: all 0.2s ease;
}


.et_pb_menu .et-menu > li {
    padding-left: 8px;
    padding-right: 8px;
}

.et-menu .menu-item-has-children > a:first-child {
    padding-right: 0px!important;
}
.et-menu .menu-item-has-children > a:first-child::after{
	display:none
}
@media (max-width: 1220px) {
 #et_mobile_nav_menu {
 display: block!important;
 }
 
#top-menu {
 display: none!important;
 }

/* ----------- MENU EDIT END -------------------------------------------------------------------- */




/*--fix menu weight and scroll--*/
.et_mobile_menu .menu-item-has-children > a {
    font-weight: 600!important;
}
.et_mobile_menu {   
    overflow-y:scroll!important;
    max-height:80vh!important;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}
/*--fix menu weight and scroll END--*/



/* Increase width of drop-down menus */
@media screen and (min-width: 981px) {
.sub-menu {
	min-width: 280px;
}
#top-menu li li a {
    width: 240px;
	/* Extra - Reduce padding on list items */
	padding: 4px 12px;
	}
}

/* ----------- Collapsible mobile menu --------------------------------------------------------------------------------- */ 
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}

/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}

/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	border-radius: 50%;
	padding: 3px;
}

/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}

/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}

/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
	position: relative;
	display: block;
	line-height: 0;
}

/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;}
	

/* ----------- Collapsible mobile menu END -------------------------------------------------------------------- */ 



/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
h1 {
  font-size: 50px;
}
h2 {
  font-size: 38px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 28px;
}
  
}
 
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
 h1 {
  font-size: 40px;
}
h2 {
  font-size: 34px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 24px;
}
}
 
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
  h1 {
  font-size: 36px;
}
h2 {
  font-size: 32px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 22px;
}
}
 
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
 
}
 
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
 
}
 
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
 body {
	 font-size:16px!important;
 }
h1 {
  font-size: 34px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
}
}