@charset "UTF-8";
/* CSS Document */
/* File  Name: styles.css
   Date: 01/26/2025
   Programmer: Cybercat Designs
   Description: css file for cybercat designs main website 
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

body {
	width: 100%;
	background: url(../Images/bgforest.png); 
	background-repeat: repeat-y; 
	background-size: cover; 
	font-family: 'Montserrat', sans-serif;  
	font-style: normal; 
	letter-spacing: 1px;
	line-height: 1.5em; 
	margin: 0 auto;  
}


/* -------------- Common Selector Styles ------------- */

a, a:link, a:visited { 
	color: #F5F5F5; 		
	font-weight: normal; 
	text-decoration: none 
}

a:hover { 
	text-decoration: none; 
	color: #7F997F;    
	font-weight: bold; 
	text-decoration: none;
}

a.more { 
	display: block; 
	width: 77px; 
	height: 31px; 
	line-height: 28px; 
	color: #000000; 
	text-align: center; 
	background: url(../images/tooplate_more.png) repeat; 
	font-weight: 700; 
	text-decoration: none; 
}

p { 
	margin: 0 0 10px 0; 
	float: left;
}

img { border: none; 
	max-width: 100%;
	height: auto;
}

blockquote { 
	font-style: italic; 
	margin: 0 0 0 10px;
}

cite { 
	font-weight: 
	bold; color:#000; 
	}

cite a, cite a:link, cite a:visited  { 
	font-weight: bold; 
	color: #000; 
}
cite span { font-weight: 400; 
	color: #595858;   /* red */
}


h1 { 
	font-family: 'Montserrat', sans-serif;   /* ---   home page statement---*/
	color:  #E5E4E2;         
	font-size: 20px; 
	font-weight: bold;
	text-align: center;
	margin-left: 10px;
	margin-top: 20px;
	margin-bottom: 5px;
}	

h2 {
	font-family: 'Montserrat', sans-serif;   /* --- contact page statement ---*/
	color:  #E5E4E2; 
	font-size: 17px;
	font-weight: normal;
	text-align: left;
}

h3 { 
	font-family: 'Montserrat', sans-serif;	  /* --- Page titles --- */
	color:  #E5E4E2;
	font-size: 20px;
	font-weight: bold;
	font-style: normal;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 115px;
	float: left;
}
	
h4 { 
	font-size: 16px; /* --- web design page sub title --- */
	font-weight: bold;
}	

h5 { 
	font-size: 18px; /* --- energy clearing page sub titles --- */
	font-weight: bold;
}	

h6 { 
    font-family: 'Montserrat', sans-serif;    /* -- Footer List titles ---*/
	color:  #E5E4E2; 
	font-size: 14px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 1px;
	text-decoration: none;
}

h7 {
	font-family: 'Montserrat', sans-serif;    /* -- Pages page subtitles ---*/
	color:  #E5E4E2;
	font-size: 18px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 1px;
	text-decoration: none;
}

h8 { 
    font-family: 'Montserrat', sans-serif;    /* -- home page table products list  ---*/
	color: #E5E4E2; 
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
}

h9 { 
    font-family: 'Montserrat', sans-serif;    /* -- home page titles ---*/
	color:  #E5E4E2; 
	font-size: 18px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 1px;
	text-decoration: none;
}

h10 { 
	font-weight: bold;
	font-style: uppercase;
	text-decoration-line: underline;
}

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

.float_l { float: left }
.float_r { float: right }

.tooplate_list { 
	list-style: decimal-leading-zero; 
	padding: 0 0 0 15px; 
	margin: 0 0 0 15px; 
}

.tooplate_list li { 
	color: #F5F5F5;  
	margin-bottom: 8px ;
}

.tooplate_list li a { 
	color:  #E5E4E2;
	font-weight: normal; 
	font-size: 14px; 
	text-decoration: none; 
}

.tooplate_list li a:hover { text-decoration: none; }


hr.menu {						
	border:  #E5E4E2 .5px solid;
	position: relative;
	padding-left: 80px;	

}
/* -------------------------- Header --------------------- */

#tooplate_header {
	width: 100%;         /* -- 1170px -- */
	height: 190px;
	
	background-color: #000000;  /* ----  url(../Images/black_banner.png)   repeat-x top; --- */
	margin: 0 auto;
	text-align: center;  
}
 
#tooplate_titlebar_wrapper {
	width: auto;
    background-color: #000000; 
	margin: 0 auto;
	
}    
 
 .image_shadow {		/* ---- voices logo  ---- */
 	text-align: center;
 	margin-top: 
 	padding-right: 10px;
 }

/*----- End of Header -----*/


/*----- NAV -----*/

.tooplate_ddsmoothmenu {    /*-- see CSS file ddsmoothmenu for NAV code styles -----*/
	width: auto;
}

#pagenav
pagenav_a:link { 
	color: #F5F5F5; 
	text-decoration: none; 
	font-weight: normal; 
	font-weight: normal;
}

pagenav_a:visited {
	color: #F5F5F5; 
	text-decoration: none; 
	font-weight: normal; 
}

pagenav_a:active { 
	color: #F5F5F5; 
	text-decoration: none; 
}
	
pagenav_a:hover { 
color: #7F997F; 
text-decoration: none; 
font-weight: normal;
}

/* ----------------------------- Page Section Layout --------------------- */

#tooplate_mid_main {		
	width: 960px;
	height: auto;
	font-family: 'Montserrat', sans-serif;
	color: #E5E4E2;                    /* ---  #F5F5F5;  ---- */
	font-size: 12px; 
	font-style: normal; 
	letter-spacing: 1px;
	margin: 0 auto;
	padding-top: 100px;
	margin-bottom: -60px;
}	


#mid_text_pages {            
	width: 760px; 
	height: auto;
	font-family: 'Montserrat', sans-serif;
	color: #E5E4E2;
	font-size: 12px; 
	font-style: normal; 
	text-align: left;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-top: -60px;
	padding-left: 30px;
}


/* ------------------------------  Home Page ------------------------- */

#text_page {
	width: 350px;
	height: auto;
	font-family: 'Montserrat', sans-serif;
	color: #E5E4E2;
	font-size: 12px; 
	font-style: normal;
	text-align: left; 
	letter-spacing: 1px;
	margin: 0 auto;
	padding-right: 410px;
	text-align: wrap;
}

.top_text {            
	margin-top: -110px;
	text-align: wrap;
	font-family: 'Montserrat', sans-serif;
	color: #E5E4E2;
	font-size: 12px; 
	font-style: normal;
	letter-spacing: 1px;
}

 .image_pages {		
 	position: relative;
 	margin-top: -17px;
 }

 .image_monopages {		
 	position: relative;
 	margin-top: -27px;
 }


#aside {
	float: right;
	width: 365px;
	height: auto;
	font-family: 'Montserrat', sans-serif;
	color: #E5E4E2;
	font-size: 12px; 
	font-style: normal; 
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 360px;
	margin-top: -475px;
}


/* ---------------------------------- About pages -----------------------------*/ 

.images_about{
	margin-top: 60px;
	padding-right: 30px;
	margin-bottom: 60px
}
.about_energy {
	margin-top: 20px;
	padding-right: 30px;
	margin-bottom: 60px;
}
.about_wheel {
	margin-top: -125px;
	padding-right: 30px;
	margin-bottom: 60px;
}

/* -------------- wheel of the year page --------------- */

.mid_img_wheel {
	margin-left: 210px;	
}

/* -------------- Energy Clearing Page --------------- */

.ul clear [
]


/* --------------------- BOS page ------------------ */

#tooplate_pages {
    background: transparent; 	
}	
	

a:hover {
    color: #7F997F;
    background-color: transparent;
    text-decoration: underline;
}

/* --------------------- Contact Form ------------------ */

#tooplate_nav {
	color: #F5F5F5; 
	text-decoration: none; 
	font-weight: normal; 
	font-weight: normal;
}

_a:visited {
	color: #F5F5F5; 
	text-decoration: none; 
	font-weight: normal; 
}

a:active { 
	color: #F5F5F5; 
	text-decoration: none; 
}
	
a:hover { 
	color: #7F997F; 
	text-decoration: none; 
	font-weight: bold;
}

form.subform { 
	width: 500px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color:  #E5E4E2;
	background: transparent;
	margin: 0 auto;	
	margin-top: -20px;
	padding-right; 55px;
	padding-bottom: 12px;
	border-style: none;
	letter-spacing: 1px;
}

form.subform .label { 
	width: 388px; 
	margin-right: 10px;
	margin-top: 1px;    /*-- spacing between fields --*/
	font-size: 14px; 
	color: #E5E4E2;
}

form.subform .input_field {
	width: 500px;
	height: 55px;    /*-- field height --*/ 
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: #F5F5F5;
	background: transparent;
	text-align: left;
	padding: 1px;  
	border: 1px solid #F5F5F5; 
	border-radius: 5px;
}

textarea { 
	width: 500px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color:  #E5E4E2;
	background: transparent;
	text-align: left;
	padding: 1px; 
	border: 1px solid #F5F5F5; 
	border-radius: 5px;
}

.submit {     /* --- #Contact_form form .submit_btn --- */
	display: block;
	width: 80px; 
	height: 30px;
	background: transparent; 
	text-align: center; 
	text-decoration: none; 
	font-size: 16px;
	color:  #E5E4E2;
	border: 1px solid  #E5E4E2; 
	border-radius: 5px;
}

 /* ------------- Footer ------------ */
 #tooplate_footer {
	width: 1000px;
/* - background-color: #000000; -- */
	margin: 0 auto;
	padding-left: 120px;
	padding-top: 60px;
	font-size: 10px;
	color:  #E5E4E2;
	text-align: left;


 {box-sizing: border-box;}
body {
	font-family: 'Montserrat', sans-serif;
}

.container{
	max-width: 100%;        
	margin: auto;
	font-size: 12px;
	color:  #E5E4E2;
}

.row{
	display: flex;
	flex-wrap: wrap;
}

ul{
	list-style: none;
}

li{
	list-style: none;
}

.footer{
/* --  	background-color: #000000; -- */
	margin-top: -100px;
  /* --  padding-left: 70px;   -- */
}

.footer-col{
   width: 25%;          /* --  spacing between columns -- */
}

.footer-col h6{
	font-size: 14px;
	color:  #E5E4E2;
	text-transform: capitalize;
	margin-bottom: 5px;
	font-weight: 900;
	position: relative;
	
}

.footer-col h6::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #000000;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}

.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}

.footer-col ul li a{         /* --  listed items font size -- */
	font-size: 12px;
	text-transform: capitalize;
	color: #E5E4E2;
	text-decoration: none;
	font-weight: 300;
	display: block;
	transition: all 0.3s ease;
}

.footer-col ul li a:hover{
	color: #7F997F;
	font-weight: bold;
	padding-left: 8px;
}

.footer-col .social-links a{	
	background-color: #000000;
	margin:0 9px 9px 0;  
	text-align: center;
	color: #E5E4E2;
	transition: all 0.3s ease;
}

/* ------------- Copyright Bar -------------- */   

#tooplate_cr_bar {
	width: 100%;
/* ---	background-color: #000000; ---- */   
	margin: 0 auto;
	padding-top: 25px;
	font-size: 10px;
	color:  #E5E4E2;
	text-align: center;	
}

/* ------------- End of footer -------------- */ 


/* ------------- Responsive - new code for devices -------------- */  `

/*responsive */

/* Responsive layout - when the screen is less than 600px wide, make the three columns 
stack on top of each other instead of next to each other */

@media (max-width: 768px) {
  header {
  width: 100%;
 }
}
  footer {
    width: 100%;
  }


@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
  }
 }
 
@media(max-width: 574px){
  .footer-col{
   width: 100%;
  }
 }

@media screen and ( max-width: 500px){
    #inner-flex-container  { 
    flex-direction: column; 
 }
   }
    
    #mainpanel {
     height: 100vh; 
 }
   }
 
@media (max-width: 600px){
    body {
    flex-direction: vertical;
    padding: 20px 30px;
  }
}
@media (max-width: 600px){
    container {
    flex-direction: vertical;
    padding: 20px 30px;
  }
}
@media (max-width: 600px){
    nav {
    flex-direction: column;
    padding: 20px 30px;
  }
}


@media (max-width: 600px){
    footer .row {
    flex-direction: column;
    padding: 20px 30px;
  }
}


/* tablet breakpoint */
@media (min-width:768px) {
    .padded-boxes > * {
     width:calc((100% - 4px) / 4);
  }
}
 
@media img {
	width: 100%; 
	height: auto;   
  }
}
		 		 
@media div {
	float: none;
    width: 100%;
	height: auto;	
  }
}

/* To make all elements center */
  display: flex;
  justify-content: center;
  align-items: center;
  }
}

/* Media Queries For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
  .gfg-div {
  width: 100%;  
  }
}
 		  
/* For Mobile Portrait View */
@media screen and (max-device-width: 580px)
and (orientation: portrait) {
  .gfg-div {  
   width: 100%; 
  }
}
 
/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
  .gfg-div { 
   width: 100%; 
  }
}
 
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
  .gfg-div {  
  width: 100%;
  }
}
 
/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div { 
  width: 100%;
  }
}
 
/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {  
   width: 100%; 
  }
} 

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
  .gfg-div { 
   width: 100%; 
  }
}