@import url('../Divi/style.css');

/*
Theme Name: Kahutara School Theme
Theme URI: http://www.kahutaraschool.co.nz/
Version: 2.5
Description: A fully customised Divi theme for Kahutara School.
Author: Dave Murray at Satellite Design
Template: Divi
*/

/*
inky blue is #02255b
dark blue blue is #0d99d9
light blue is #2daae5
footer grey is #d0d0d0
lighter grey is #e3e3e4
*/

#GoogleMathsDrive {
	background-color: #83c3ee;
	margin: 20px 0 40px 0;
	padding: 30px;
}


#GoogleMathsDrive p.space{
	padding: 20px 0 10px 0;
}


#GoogleMathsDrive a:link, #GoogleMathsDrive a:visited {
	color: #FFF;
	background-color: #0d99d9;
	padding: 10px 20px;
	display: block;
	text-transform: uppercase;
	text-align: center;
	font-weight: 600;
	letter-spacing: 1px;
}

#GoogleMathsDrive a:active, #GoogleMathsDrive a:hover {
	color: #FFF;
	background-color: #02255b;
	text-decoration: none;
}


/*------------------------------------------------------------*/
/*----------------------[ TABLE STYLES ]----------------------*/
/*------------------------------------------------------------*/

table { width: 85% !important; border: none !important; margin-bottom: 50px !important; }

tr { height: 25px !important; border: none !important; }

td { padding: 0 !important; width: 5% !important; border: none!important; }

td.red { background-color: #db0000 !important; }

td.orange { background-color: #e89824 !important; }

td.yellow { background-color: #ffff3c !important; }

td.green { background-color: #91ff3c !important; }

td.copy { padding-left: 10px !important; width: 20% !important; }

td.copy2 { padding-left: 10px !important; width: 15% !important; }





table.report { width: 100% !important; border: none !important; margin-bottom: 50px !important; margin-top: 0; table-layout: fixed; }

table.report td { padding: 0 !important; width: 5% !important; border: none!important; }

table.report td.copy { padding-left: 10px !important; width: 50% !important; }

table.payments  { margin-top: 30px; }

table.payments tbody tr td { padding-bottom: 15px !important; }



#hero-image { border: 15px solid #e3e3e4; margin-bottom: 30px; }

.bottom-10 { margin-bottom: 10px !important; }

#side-image { margin-bottom: 40px; }

#side-image div.et_pb_main_blurb_image { margin-bottom: 10px; }

.caption { font-size: 12px; }

#colOne { width: 47.5%; margin-right: 2.5%; float: left; }

#colTwo { width: 47.5%; margin-left: 2.5%; float: right; }


#white-panel td.copy3 { padding-left: 2% !important; width:85% !important; }

#white-panel .red, #white-panel .red2 { background-color: #db0000 !important; width: 25px !important; }

#white-panel .orange2 { background-color: #ffd169 !important; width: 25px !important; }

#white-panel .yellow, #white-panel .yellow2 { background-color: #ffff3c !important; width: 25px !important; }

#white-panel .green { background-color: #91ff3c !important; width: 25px !important; }

#white-panel tr.white2 { height: 10px !important; }

#white-panel tr.white2 td { display: none; }



/*-----------------------------------------------------------*/
/*----------------------[ TYPE STYLES ]----------------------*/
/*-----------------------------------------------------------*/

.NoSpaceAbove { margin-top: 0; }

.blue { color: #0d99d9; }

h2 { color: #0d99d9 !important; font-size: 19px !important; margin-top: 20px; line-height: 25px; }

h2::before { content: "> "; font-size: 16px; }

.staff-name { font-weight: 600; padding: 0 !important; line-height: 17px; margin-top: 15px; }

.staff-email { color: #0d99d9 !important; padding-bottom: 5px; }

.staff-email a:hover { text-decoration: underline; }

p a:hover { text-decoration: underline; }

h5 { font-size: 16px !important; font-weight: 600; padding: 0 !important; margin-top: 15px; margin-bottom: 7px; color: #000000 !important; }




/*----------------------[ BULLETS ]----------------------*/

#white-panel ul { padding-left: 0px !important; }

#white-panel ul li  { display: block; margin-left: 15px; }

#white-panel ul li:before {  display: inline-block; content: "•"; counter-increment: none; width: 15px; margin-left: -15px;}




ol { counter-reset: item; margin-left: 0; padding-left: 0; }

ol li { display: block; margin-left: 20px; }

ol li:before {  display: inline-block; content: counter(item) "."; counter-increment: item; width: 20px; margin-left: -20px; }



ol ul { padding-bottom: 10px !important; padding-left: 20px !important; }

ol li.spacer  { padding-bottom: 10px !important; }

ol ul li { margin-left: 20px; }

ol ul li:before { content: "•"; counter-increment: none; width: 15px; }






.et_pb_team_member_description h4 { font-size: 18px; line-height: 20px; padding-bottom: 2px; margin-top: 10px; color: #0d99d9; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }

.et_pb_member_position { font-size: 15px; line-height: 20px; padding-bottom: 10px !important; font-weight: 700; text-transform: uppercase; color: #000000; letter-spacing: 1px; }

.et_pb_team_member_description { margin-bottom: 20px; }

.et_pb_team_member_description p { font-size: 13px; line-height: 20px; padding-bottom: 5px; }





/*------------------------------------------------------*/
/*----------------------[ HEADER ]----------------------*/
/*------------------------------------------------------*/

#header { background-color: rgba(0,255,255, 0); padding-bottom: 0px; padding-top: 30px; }

#header-panel { height: 176px; background-repeat: no-repeat; padding: 0; }

.kahutara { font-size: 50px; line-height: 50px; text-transform: uppercase; padding: 0; letter-spacing: 5px; margin-top: 30px; }

.school { font-size: 30px; text-transform: uppercase; padding: 0 0 10px 0; letter-spacing: 5px; }

.byline { font-size: 13px; line-height: 20px; color: #2daae5; letter-spacing: 1px; font-weight: 600; }

#SchoolLogo img { height: 176px; }

#header-panel div.et_pb_column_0 { margin-right: 0px; height: 176px; }

#contact-details { margin-top: 20px; padding: 0 !important; text-align: right; }

#contact-details #text-2 { color: #2daae5; margin: 0; line-height: 22px; }

#contact-details #text-2 a:hover { color: #FFFFFF; }

#contact-details #text-2 img { margin-top: 10px; margin-left: 10px; }

img.PhoneIcon { margin-top: 0px !important; }

img.MailIcon { margin-top: 10px !important; }

img.ParentIcon { margin-top: 4px !important; }




/*------------------------------------------------------------*/
/*------------------------[ GALLERY ]-------------------------*/
/*------------------------------------------------------------*/


.et_pb_gallery_item.et_pb_grid_item {
clear: none !important;
margin: 1% !important;
width: 23% !important;
}



/*------------------------------------------------------------*/
/*------------------------[ CALENDAR ]------------------------*/
/*------------------------------------------------------------*/

table.simcal-calendar-grid { width: 100% !important; margin-bottom: 0 !important; }

.simcal-calendar h3 { background-color: #FFFFFF; color: #0d99d9; font-size: 30px !important; text-transform: uppercase; }

.simcal-icon-left, .simcal-icon-right { color: #02255b; font-size: 20px; }

.simcal-week-day { background-color: #2daae5; color: #FFF !important; text-transform: uppercase; border: 1px solid #2daae5 !important; letter-spacing: 1px; }

.simcal-day { border: 1px solid #2daae5 !important; }

.simcal-day-number { text-align: left; background-color: rgba(255, 255, 255, .0) !important; padding: 10px 10px 0 10px !important; color: #000 !important; }

ul.simcal-events li {  display: block; margin-left: 0; font-size: 13px; margin-left: 5px !important; }

ul.simcal-events li:before { display: inline-block; content: none !important; }

.simcal-present.simcal-day div { background-color: rgba(45, 170, 229, .2); border: none !important; }


/*-------------------------------------------------------*/
/*----------------------[HOME PAGE]----------------------*/
/*-------------------------------------------------------*/


#homepage-slider { height: 425px; border: 15px solid #e3e3e4; }

div.et_pb_slide { height: 425px !important; }

#welcome { background-color: #2daae5; border: 15px solid #0d99d9; padding: 20px 30px 30px 30px; }

#content { background-color: rgba(0,255,255, 0); padding: 0; }

#white-panel { background-color: #FFFFFF; padding: 50px 40px 60px 40px; }

#white-panel-calc { background-color: #FFFFFF; padding: 30px 40px 30px 40px; }





#white-panel h3 { background-color: #0d99d9; font-size: 17px !important; padding: 10px; margin-bottom: 10px; letter-spacing: 1px; }

h1 { font-size: 30px !important; }

#HeroNav.et_pb_fullwidth_menu  { background-color: rgba(0,255,255, 0) !important; }

.divider { height: 15px !important; padding: 0 !important; }

#terms { padding-bottom: 20px; }

#terms p { padding-bottom: 5px; }

#facebook-feed { height: 635px; overflow: hidden; }

#kpc-facebook-feed { height: 700px; overflow: hidden; }

#twitter-facebook-feed { height: 800px; overflow: hidden; }


/*------------------------------------------------------*/
/*----------------------[ FOOTER ]----------------------*/
/*------------------------------------------------------*/

#footer-top { background-color: #d0d0d0; padding: 30px 30px 0 30px; }

#footer { background-color: #d0d0d0; padding: 10px 30px 50px 30px; }

.widget_nav_menu { margin-bottom: 0 !important; }

#menu-footer_menu_1, #menu-footer_menu_2, #menu-footer_menu_3, #menu-footer_menu_4 { line-height: 20px !important; font-size: 13px; }

.et_pb_sidebar_4 { border-right: none; }

#satellite { margin-bottom: 50px; font-size: 13px; }

#satellite a:link, #satellite a:visited { color: #9a9a9b !important; letter-spacing: 1px; text-transform: uppercase; transition: 0.2s; }

#satellite a:active, #satellite a:hover { color: #9a9a9b !important; letter-spacing: 2px; text-transform: uppercase; }

/*-------------------------------------------------------*/
/*----------------------[MAIN MENU]----------------------*/
/*-------------------------------------------------------*/

#menu-main_nav { background-color: #0d99d9 !important; text-transform: uppercase; padding: 0 !important; }

#HeroNav { background-color: rgba(255,255,255,0.0) !important; }

#menu-main_nav li a:after { display:none; }

#menu-main_nav .children { padding-right: 0 !important; }

#menu-main_nav li a { text-decoration: none; font-size: 15px; letter-spacing: 1px; padding: 20px 10px !important; }

#menu-main_nav li a:hover { color: #02255b; }

#menu-main_nav ul.sub-menu { background-color: rgba(255, 255, 255, .85) !important; padding: 0 !important; width: 255px; text-transform: none; }

#menu-main_nav ul.sub-menu .submenu-dd  { padding: 0 !important; width: 100%; }

#menu-main_nav ul.sub-menu .submenu-dd a::before { content: ">\00a0\00a0"; margin-left: -15px; }

#menu-main_nav ul.sub-menu .submenu-dd a { width: 100%; font-size: 14px; padding: 10px 20px 10px 35px !important; color: #000; letter-spacing: 0px; line-height: 20px; font-weight: 400; border-bottom: 1px solid #333; }

#menu-main_nav ul.sub-menu .submenu-dd a:hover { background-color: #83c3ee; width: 100%; }

ul.sub-menu { border-top: none !important; }

#menu-main_nav li.menu-item { padding: 0 !important; }



/*---------------------------------------------------------*/
/*----------------------[MOBILE MENU]----------------------*/
/*---------------------------------------------------------*/

span.mobile_menu_bar { background-color: #0d99d9; text-align: left; margin-bottom: 0 !important; padding: 15px 40px !important; }

#HeroNav .et_pb_row.clearfix { min-height: 10px; }

a.mobile_nav { float: none !important; }

html body .mobile_menu_bar:before { content: "\62"; font-size: 32px; font-family: "ETmodules" !important; font-weight: normal !important; color: #FFFFFF; top: 0 !important; }

html body .mobile_menu_bar:after { content: ' Menu'; font-size: 32px; font-family: "Open Sans" !important; font-weight: normal !important; color: #FFFFFF;}

ul#mobile_menu1.et_mobile_menu { margin-top: -20px !important; width: 43%; padding: 0; border-top: none;  } 

ul#mobile_menu1.et_mobile_menu li a { text-decoration: none !important; letter-spacing: 0px; padding-bottom: 8px; padding-top: 8px; }

ul#mobile_menu1.et_mobile_menu li a:hover { background-color: #83c3ee; }  

li.children.menu-item { text-transform: uppercase; }

ul#mobile_menu1 .menu-item-has-children { background-color: #2daae5 !important; }

ul#mobile_menu1 .menu-item-has-children a { line-height: 10px; padding-top: 8px; padding-bottom: 8px; }

ul#mobile_menu1 .menu-item-has-children a:hover { background-color: #2daae5 !important; color: rgba(255, 255, 255, 1) !important; opacity: 1; cursor: default; }

.submenu-dd.menu-item { background-color: #FFFFFF !important; line-height: 13px; padding-left: 0; }

.submenu-dd.menu-item a { color: #000000 !important; text-transform: none; line-height: 13px; border-bottom: 1px solid #858586; }

.submenu-dd.menu-item a:hover { cursor: pointer !important; }

.submenu-dd.menu-item a::before { content: ">\00a0\00a0"; }

ul#mobile_menu1.et_mobile_menu li ul.sub-menu { padding: 0; }

ul#mobile_menu1.et_mobile_menu li ul.sub-menu a:hover { background-color: #c5dff2 !important; color: #000 !important; }

.et_first_mobile_item a { background-color: #2daae5; line-height: 10px; padding-top: 8px; padding-bottom: 8px; font-weight: 700 !important; } 

ul#mobile_menu1.et_mobile_menu li.menu-last a { background-color: #FFF; color: #000; line-height: 10px; padding-top: 8px; padding-bottom: 8px; font-weight: 400 !important; } 

ul.sub-menu { text-transform: none !important; }


ul#mobile_menu1.et_mobile_menu li.no-children a { background-color: #FFF; color: #000; font-weight: 400 !important; }

ul#mobile_menu1.et_mobile_menu .no-children a::before, ul#mobile_menu1.et_mobile_menu .menu-last a::before { content: ">\00a0\00a0"; }

/*------------------------------------------------------*/
/*---------------------[RESPONSIVE]---------------------*/
/*------------------------------------------------------*/


/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

body {
        background-size: 2048px 1536px;
        background-repeat: repeat-y !important;
        background-position: center !important;
    }
    
    html {
    	background-color: #FFF !important;
    	background-attachment: fixed !important;
    	background-repeat: repeat-y !important;
    	background-position: center !important;	
    }
    
}






@media only screen and ( min-width: 1100px ) and ( max-width: 1200px ) {

/*#white-panel { background-color: red; }*/

#menu-main_nav li a { letter-spacing: 1px; }

#white-panel, #header-panel, #HeroNav .et_pb_row.clearfix, #footer-top, #footer { width:90%; }

#header-panel div.et_pb_column_0 { margin-right: 15px; }

#header-panel { padding: 0 20px 0 0; }


}





@media only screen and ( min-width: 981px ) and ( max-width: 1099px ) {

/*#white-panel { background-color: blue; }*/

#menu-main_nav li a { font-size: 15px; letter-spacing: 0px; }

#white-panel, #header-panel, #HeroNav .et_pb_row.clearfix, #footer-top, #footer { width:90%; }

#header-panel div.et_pb_column_0 { margin-right: 15px; }

#header-panel { padding: 0 20px 0 0; }

#header-panel .et_pb_column_1 { width: 40% !important; float: left !important; }

div.et_pb_column.et_pb_column_1_4.et_pb_column_2 { width: 30% !important; max-width: 30%; float: right; }


}





@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

/*#white-panel { background-color: yellow; }*/

#white-panel, #header-panel, #HeroNav .et_pb_row.clearfix, #footer-top, #footer { width:90%; }

#SchoolLogo { display: none; }

.et_pb_row_sticky { display: none; }

#header-panel .et_pb_column_1 { width: 48% !important; float: left !important; margin-left: 30px; }

div.et_pb_column.et_pb_column_1_4.et_pb_column_2 { width: 45% !important; max-width: 45%; float: right; }

#contact-details #text-2 { font-size: 14px; margin-bottom: 0 !important; }

div#search-2.et_pb_widget.widget_search { margin: 0 !important; clear: both; float: right; width: 100% !important; }

div#text-2.et_pb_widget.widget_text { float: right; margin: 0 !important; width: 100% !important; }

#contact-details.et_pb_sidebar_0 { margin-right: 30px; }

#terms { width: 47.5%; float: left; }

#facebook-feed { width: 47.5%; float: right; }

#footer-top h4 { font-size: 22px; padding: 0; margin-bottom: 10px; }

#footer-top div.et_pb_column.et_pb_column_4_4.et_pb_column_5, #footer-top div.et_pb_column.et_pb_column_4_4.et_pb_column_6, #footer-top div.et_pb_column.et_pb_column_4_4.et_pb_column_16 {  margin-bottom: 0px; }

#footer div.et_pb_column.et_pb_column_1_4.et_pb_column_6, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_7, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_8, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_9, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_10 { width: 23% !important; margin-right: 2% !important; margin-bottom: 0; float: left;  }


#footer div.et_pb_column.et_pb_column_1_4.et_pb_column_17, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_18, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_19, #footer div.et_pb_column.et_pb_column_1_4.et_pb_column_20 { width: 23% !important; margin-right: 2% !important; margin-bottom: 0; float: left;  }

#footer { padding-bottom: 0 !important; }

#footer .et_pb_column_7 { width: 22% !important; margin-right: 3%; }

#StaffContacts { width: 47.5%; margin-left: 2.5%; float: right; }

#ContactUs { width: 47.5%; margin-right: 2.5%; float: left; }


}






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

/*#white-panel { background-color: green; }*/

span.mobile_menu_bar { padding-left: 3% !important; }

.divider { height: 10px !important; }

#white-panel, #header-panel, #HeroNav .et_pb_row.clearfix, #footer-top, #footer { width:93%; }

#SchoolLogo { display: none; }

.et_pb_row_sticky { display: none; }

#header-panel .et_pb_column_1 { width: 57% !important; float: left !important; margin-left: 3%; }

div.et_pb_column.et_pb_column_1_4.et_pb_column_2 { width: 37% !important; max-width: 37%; float: right; margin-right: 3% !important; }

#contact-details { margin-top: 30px; }

#contact-details #text-2 { font-size: 11px; line-height: 19px; margin-bottom: 0 !important; }

#contact-details #text-2 img { margin-left: 7px; }

img.PhoneIcon { margin-top: 0px !important; }

img.MailIcon { margin-top: 6px !important; }

img.ParentIcon { margin-top: 0px !important; }

.kahutara { font-size: 45px; line-height: 45px; letter-spacing: 3px; }

.school { font-size: 27px; letter-spacing: 3px; }

.byline { font-size: 12px; letter-spacing: 0px; }

#searchform.searchform div { margin-top: 8px; }

ul#mobile_menu1.et_mobile_menu { width: 65%; } 

#white-panel { padding: 3%; }

#welcome { padding: 5%; }

#homepage-slider { height: 300px; }

#facebook-feed { text-align: center; width: 100%; }

#footer-top.et_pb_row.et_pb_row_3 { padding: 3% 3% 0 3%; }

#footer-top h4 { font-size: 25px; padding: 0; }

#footer { padding: 0 3% 3% 3%; }

#footer .et_pb_column_7, #footer .et_pb_column_8 { margin: 0% !important; width: 47%; }

div#nav_menu-2, div#nav_menu-3, div#nav_menu-4, div#nav_menu-5 { margin: 0 !important; }

#footer #menu-item a { font-size: 20px; }

ul#menu-footer_menu_1, ul#menu-footer_menu_2, ul#menu-footer_menu_3, ul#menu-footer_menu_4 { font-size: 15px; }

div.et_pb_column.et_pb_column_1_4.et_pb_column_9 { margin: 0; }

div.et_pb_column.et_pb_column_4_4.et_pb_column_6 { margin-bottom: 10px; }

#header { padding-top: 3% !important; }


}	
	




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

/*#white-panel { background-color: grey; }*/

#white-panel, #header-panel, #HeroNav .et_pb_row.clearfix, #footer-top, #footer { width:93%; }

#footer-top h4 { text-align: center; }

#footer-top .et_pb_column_5 { margin-bottom: 10px; }

#footer .et_pb_column_6, #footer .et_pb_column_7, #footer .et_pb_column_8, #footer .et_pb_column_9, #footer .et_pb_column_10, #footer .et_pb_column_17, #footer .et_pb_column_18, #footer .et_pb_column_19, #footer .et_pb_column_20 { margin: 0; text-align: center; }

ul#menu-footer_menu_2 { margin-top: 0.5em !important; }

#header-panel .et_pb_column_1 { width: 97% !important; float: left !important; margin-left: 3%; }

.kahutara { font-size: 47px; line-height: 50px; text-transform: uppercase; padding: 0; letter-spacing: 3px; margin-top: 30px; }

.school { font-size: 30px; text-transform: uppercase; padding: 0 0 10px 0; letter-spacing: 5px; }

.byline { font-size: 12px; line-height: 20px; color: #2daae5; letter-spacing: 0px; font-weight: 600; }

ul#mobile_menu1.et_mobile_menu { width: 85%; } 

#contact-details { display: none; }

#header { padding-top: 0 !important; }

#colOne { width: 100%; float: none; }

#colTwo { width: 100%; float: none; }


}		
	
	
	
	
	
/*768px
980px
800px
300px
900px
1405px
1200px
1100px*/