/*======================================
Theme Name: CliftonCID
Theme URI: https://divicake.com/
Description: This child theme runs off of Divi
Version: 1.0
Author: NSDigital Consulting LTD(PTY)
Author URI: https://nsdigitalconsulting.com/
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/*mobile top header fix*/
@media (max-width: 980px) {
    #et-info-phone  {
	font-size: 0.8em !important;
		display: block;

}
	#et-info-email {
	font-size: 0.8em !important;
		margin-top: 10px;
		display: block;

}
	#top-header .et-social-icons {
	font-size: 0.8em !important;
		margin-top: 10px;
		display: block !important;
		float: none !important;
		    text-align: center !important;

}
}  

/*Top Bar - Contact info*/
#et-info-phone {
    margin-right: 20px;
}

@media (max-width: 980px) {
    #et-info-phone  {
	font-size: 0.8em !important;
		display: block;

}
	#et-info-email {
	font-size: 0.8em !important;
		margin-top: 10px;
		display: block;

}
	#top-header .et-social-icons {
	font-size: 0.8em !important;
		margin-top: 10px;
		display: block !important;
		float:none !important;
		    text-align: center !important;

}
}  

/*Submenu changes*/
.nav li ul {
	border-top: 3px solid #68a9b2;
}


/*mobile menu icon*/
#top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a, .mobile_menu_bar:after, .mobile_menu_bar:before {
    color: #203c61;
}
/*Secondary Menu - SC placement*/
#et-info {
    float: none; 
 }
 
 #top-header .et-social-icons {
     float: right;
     display: inline-block;
 }
 /*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';
 }

.et_header_style_left #et-top-navigation .mobile_menu_bar {
    padding-bottom: 24px;
    margin-top: 10px;
} 

 /*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';
     color: #00d263;
     background: #f0f3f6;
     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;
     bottom: 10px;
     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;
 }

/* Button Slider */

.bttnb:hover {
 background:#203C61 !important;
}

.bttnb {
 background:#203C61; 
 color:#fff;
 padding: 0.3em 1em!important; 
 line-height: 1.7em!important;
 font-size:20px;
 font-weight: 500;
 border-radius: 12px;
 transition-duration: .2s;
 margin:20px;
	border: 2px solid;
	    border-color: #203C61;
}
 
 /*menu nominate button*/
 /* Divi call to action button normal state */ 
 
 @media (min-width: 981px) {
 .nominate {
 padding: 0!important;
 border: solid 2px #8f9c38; /* change the color of the border */
 transition: 0.3s;
 background-color: #8f9c38; /* change the color of the background */
 }
 .nominate a{
 color: #f4f4f4!important; /* change the color of the button text */
 padding: 15px 30px 15px 30px!important;
 }
	 
.et-fixed-header #top-menu .nominate a {
 color: #f4f4f4!important; /* change the color of the button text */
 padding: 15px 30px 15px 30px!important;
 }	 
}
@media (min-width: 981px) {
	 #page-container{
		 padding-top: 176px!important;
	 }
}
	 
	 
 
 /* Divi call to action button hover state */ 
 
 #top-menu-nav .nominate a:hover {
 opacity: 1;
 }
 
 .nominate:hover {
 border: solid 2px #8f9c38; /* change the color of the hover border */
 background: transparent; /* change the color of the hover background */
	 
 }
	 .nominate a:hover{
		 color:  #8f9c38!important;
	 }	 


 /*Centering the Gravity form submit button*/
 
 #gform_submit_button_1{
    border: solid 2px #203C61;
    transition: 0.3s;
    background-color: #203C61;
    color: #fff;
    padding: 10px 30px !important;
    font-size: 18px;
    text-transform: uppercase;
    border-radius: 50px;
 
 }
 
 input#gform_submit_button_1.gform_button.button {
    position: relative !important;
    margin: auto !important;
    }
 /*Transparent Menu on Homepage*/
 .home #main-header {
 background-color: #14263000!important;
 box-shadow: 0 0 0 rgba(0,0,0,.1);
 }

@media (max-width: 768px) {
	.home #main-header {
 background-color: #ffffff!important;
 box-shadow: 0 0 0 rgba(0,0,0,.1);
 }
}
 
 .home #top-header {
 background-color: #14263000!important;
 background-image: none;
 }
 
 .home #page-container {
 padding-top: 0px!important;
 }


.home .et-fixed-header#main-header, .et-fixed-header#main-header .nav li ul, .et-fixed-header .et-search-form {
 background-color: rgb(255,255,255)!important;
 }
 

 
 /*Twitter to Linkedin icon*/
 
    .et-social-twitter a.icon:before {
        content: "e09d";
    }
 
 /*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/
 /*Hide the image title and default overlay effect*/
 .et_pb_gallery_item h3,
 .et_overlay {
     display: none;
 }
 /*Set the position and size of the images and add an extra pixel to get rid of white space between images*/
 .et_pb_gallery_grid .et_pb_gallery_image {
     position: absolute;
     width: calc(100% + 1px) !important;
 }
 .et_pb_gallery_caption {
     margin: 0 !important;
 }
 /*Set the colour of the caption text*/
 .et_pb_gallery_caption a {
     color: #fff;
 }
 /*Set the font size and case for the title*/
 b {
     font-size: 20px;
     text-transform: uppercase;
 }
 /*Set the position of caption text so it displays on to of the image on hover and add an outline*/
 p.et_pb_gallery_caption {
     position: relative;
     background: rgba(0, 0, 0, .5);
     /*This is the colour of the image overlay on hover*/
     border: none;
     outline: 5px solid rgba(255, 255, 255, .5);
     /*This is the colour of the border*/
     outline-offset: -20px;
     /*This moves the border in a little from the edge*/
     text-align: center;
     padding: 25% 5%;
     /*Adjust the first value if using more or less text*/
     cursor: pointer;
     opacity: 0;
     /*Hide the caption until hover*/
     -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
     transition: all 1s ease;
 }
 /*Show the caption on hover*/
 p.et_pb_gallery_caption:hover {
     opacity: 1;
 }
 /*Media queries: You will need to adjust these values if using more or less text*/
 @media only screen and (max-width:1366px) {
     p.et_pb_gallery_caption {
         padding: 23.7% 5%;
         /*Adjust the first value if using more or less text*/
     }
 }
 @media only screen and (max-width:1280px) {
     p.et_pb_gallery_caption {
         padding: 19% 5%;
         /*Adjust the first value if using more or less text*/
     }
 }
 @media only screen and (max-width:1024px) {
     p.et_pb_gallery_caption {
         padding: 15% 5%;
         /*Adjust the first value if using more or less text*/
     }
 }
 /*This media query make the gallery display as two columns rather than three on tablets in portrait*/
 @media only screen and (min-width: 768px) and (max-width: 980px) {
     .et_pb_column .et_pb_grid_item:nth-child(2n+1) {
         clear: both !important;
     }
     .et_pb_gutters1 .et_pb_grid_item:nth-child(n) {
         width: 50% !important;
         margin: 0 !important;
         clear: none;
     }
     p.et_pb_gallery_caption {
         padding: 26.5% 5%;
         /*Adjust the first value if using more or less text*/
     }
 }
 @media only screen and (max-width: 480px) {
     .et_pb_gallery_grid .et_pb_gallery_image {
         width: 100% !important;
         max-width: 100% !important;
     }
     p.et_pb_gallery_caption {
         padding: 24.8% 5%;
         /*Adjust the first value if using more or less text*/
     }
 }
 @media only screen and (max-width: 320px) {
     .et_pb_gallery_grid .et_pb_gallery_image {
         width: 100% !important;
         max-width: 100% !important;
     }
     p.et_pb_gallery_caption {
         padding: 19.4% 5%;
         /*Adjust the first value if using more or less text*/
     }
 }
 .dipl_testimonial_slider .layout1 .dipl_testimonial_meta {
    border-top: none !important;
 }

blockquote {
    border-color: #8f9c38;
}

/**This is to removed the default KB title from the articles**/
.hkb-article__title{
 display: none;
}