@font-face {
    font-family: 'Oswald';
    src: url('font/Oswald-Bold.ttf');
    /*src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/BEBAS___-webfont.woff') format('woff'),
         url('font/BEBAS___-webfont.ttf') format('truetype'),
         url('font/BEBAS___-webfont.svg#bebasregular') format('svg');*/
    font-weight: normal;
    font-style: normal;
}
 
body{
	margin:0;
}

nav img{
	display:none;
	width: 54px;
}

/*RESIDENCE*/
img.icon {
	width: 40px;
	height: auto;
	float: left;
	margin-right: 0.8rem;
	padding-bottom: 0.5rem;
}

header{
	padding-bottom: 0.2%;
	width: 100%;
	display: inline-block;
	background-color: #262626;
	text-decoration: none;
	position: fixed;
}

a h1{
	font-size: 1.5rem;
	font-weight: bold;
	font-family: 'Oswald', Arial, Verdana, sans-serif;
	text-align: left;
	margin:0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	color: rgb(255, 240, 0);
	letter-spacing: 0.1rem;
	text-decoration: none;
	float: left;
}

nav {
	padding-top: 0.5rem;
	padding-right: 2rem;
	float: right; 
}

nav a, nav button {
	font-family: 'Oswald', Arial, Verdana, sans-serif;
}

nav a, nav a:visited, nav button, nav button:visited{
	color: white;
	padding: 0.5em 0.5em;
	text-decoration: none;
}

nav a:hover, nav a:active, nav a:focus, nav button:hover, nav button:active, nav button:focus {
	color: rgb(255, 240, 0);
	text-decoration: underline;
	transition: color 0.5s;
}

section.residence-bg {
	background-image: url("image/home.jpg");
	background-size: 100% 100%;
	color: white;
	padding:5%;
	padding-top: 25%;
	padding-bottom: 25%;
}

h2 {
	margin: 0;
	font-size: 4rem;
	font-family: 'Oswald', Arial, Verdana, sans-serif;
	text-align: center;
	letter-spacing: 0.5rem;
}

h6 {
	font-size: 1rem;
	text-align: center;
	padding-bottom: 2rem;
	font-family: 'Oswald', Arial, Verdana, sans-serif;
	letter-spacing: 0.3rem;
}

.intext-link {
	color: rgb(251, 210, 4);
	text-decoration: none;
}

.intext-link:hover {
	text-decoration: underline;
}

.before-an-outage-r{
	padding: 5%;
}

.before-an-outage-b{
	padding: 5%;
}

.subtitle {
	text-align: center;
}




h3 {
	font-size: 1.8rem;
	font-family: 'Oswald', Arial, Verdana, sans-serif;
	color: black;
	letter-spacing: 0.2rem;
}

ol{
	font-family: sans-serif;
}

.during-an-outage-r{
	padding: 5%;
}

.during-an-outage-b{
	padding: 5%;
}

h4 {
	font-size: 1.2rem;
	font-family:'Oswald', Arial, Verdana, sans-serif;
	font-weight: normal;
	line-height: 150%;
}

.list{
	width: 100%;
	text-align: left;
	float: left;
	line-height: 2em;
}

.align-middle{
		margin-top:3%;
		margin-left:35%;
		margin-right:35%;
	}

 .button {
    font-family:'Oswald', Arial, Verdana, sans-serif;
    border: none;
    color: white;
    padding: 30px 40px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 16px;
    /*cursor: pointer; */

    border-radius: 15px;
	background-color: rgb(45, 45, 40);
}

.button:hover {
	background-color: lightgrey;
}

footer{
	background-color: rgb(251, 210, 4);
	padding:5%;
	color: rgb(45, 45, 40);
	padding-top: 5%;
	padding-bottom: 10%;
	margin-top:5%;
	bottom:0%;
}

.copyright{
	float:left;
	width: 100%;
}

.contact{
	float: right;
	text-align: right;
	width: 100%;
}

h5{
	margin:0;
	font-size: 0.7rem;
}

.foot{
	float:left;
	padding:0;
	text-align: left;
	width:50%;
}

/*BUSINESS*/
section.business-bg {
	background-image: url("image/business.jpg");
	background-size: 100% 100%;
	color: white;
	padding:5%;
	padding-top: 25%;
	padding-bottom: 25%;
}

.current-outage {
/*	margin-left:4%;
	margin-right:4%;
	padding: 2%;*/
	padding-top: 7%;

}

.Preparation{
	width: 100%;
	align-content: center;
	text-align: center;
	background-color: #f0efea;
	border-radius: 2px;
	float: left;
	padding: 15%;
}

.Preparation a, .Preparation a:visited {
	color: white;
	text-decoration: none;
}

.Preparation a:hover, .Preparation a:active, .Preparation a:focus {
	color: #f2c248;
	text-decoration: underline;
	transition: color 0.5s;
}

/*home page preparation button*/
.Preparation button{
	background-color: #262626;
	border:none;
	border-radius: 4px;
	padding:5% 5%;
	color:white;
}

.Preparation button:hover{
	background-color: darkgrey;
	-webkit-transition: all 0.5s ease;
}

.homebut{
	width:50%;
} 

.Preparation h5{
	text-align:center;
}

.Report{
	width: 100%;
	text-align: center;
	align-content: center;
	background-color: #BBBBBB;
	padding-top: 25%;
	padding-bottom: 25%;
	border-radius: 2px;
	/*margin-bottom: 10%;*/
}

.Report h4 {
	margin-top:17.5%;
	font-size: 120%;
	color: black;
}

.Report button{
	background:#262626;
    border:none;
    padding:3% 5%;
    color:white;
    -webkit-border-radius:0.3em;
    -webkit-transition: all 0.5s ease;
}

.Report button:hover{
	 background-color:darkgrey;
	 border:none;
	 color:white;
      -webkit-transition: all 0.5s ease;
}

.map img{
	display: block;
	width: 105%;
	align-self: center;

}

.report-bg{
	background-image: url("image/reportbg.jpg");
	background-size: 100% 100%;
	color: white;
	padding:5%;
	padding-top: 25%;
	padding-bottom: 25%;
	margin: 0%;
}

/** Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 0.4%; /* Some padding */  
    /*border: 50% solid #ccc; *//* Gray border */
    border-radius: 0.2em; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical;/* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #262626;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: auto;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: darkgrey;
    -webkit-transition: all 0.5s ease;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-bottom: 7.5%;
    margin-left: auto;
    margin-right: auto;
   	margin-top: 2.5%;
    width: 70%;
}

section.effects-bg {
	background-image: url("image/effectsbg.jpg");
	background-size: 100% 100%;
	color: white;
	padding:5%;
	padding-top: 25%;
	padding-bottom: 25%;
}

.generalinfo{
	padding:2%;
}

p{
	padding: 2%;
	padding-top:0;
	margin:0;
	line-height: 2em;
}

.transport{
	padding:2%;
}

ul{
	font-family: sans-serif;
}

.respon-bg{
	background-image: url("image/respon-bg.jpg");
	background-size: 100% 100%;
	color: white;
	padding:5%;
	padding-top: 25%;
	padding-bottom: 25%;
}

.emergency-repairs{
	padding:5%;
	margin-bottom:2%;
}

.usual-maintenance{
	padding:5%;
	margin-bottom:2%;
}

.during-an-outage-r ol{
	padding-left:0%;
	padding-right:0%;
}

.during-an-outage-b ol{
	margin-left:15%;
}

.before-an-outage-r ol{
	margin-left:15%;
}

.before-an-outage-b ol{
	padding-left:15%;
	padding-right:15%;
}

.transport ul{
	margin-left: 20%;
}

/*drop down menu*/

.dropdowncontent a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    background-color: transparent;
}

.dropbtn {
    cursor: pointer;   
    border: none;
    outline: none;
    color: white;
    background-color: transparent;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #262626;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/*.dropdown-content a:hover {
    background-color: #ddd;
}*/

.dropbtn-menubar {
    cursor: pointer;   
    border: none;
    outline: none;
    color: white;
    background-color: transparent;
    display:none;
}

.show {
    display: block;
}

/*.show-menubar {
    display: block;
}

.dropdowncontent-menubar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    background-color: transparent;
}

.dropdown-content-menubar {
    display: none;
    position: absolute;
    background-color: #262626;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content-menubar a {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content-menubar a:hover {
    background-color: #ddd;
}*/

/*menu bar*/
.dd-hidden {
	visibility: none;
	position: absolute;
	opacity: 0;
}

.dd-shown {
	visibility: visible;
	opacity: 1;
}

.nav-toggle {
	float:right;
	margin:4%;
	margin-top:4%;
	margin-bottom:2%;
	display: none;
	font-family: 'Oswald', Arial, Verdana, sans-serif;
	color: white;
	text-decoration: none;
}



/*
	Here we hide use .hidden and .shown to enable classes to show and hide our .nav-toggle
*/

/*.nav-toggle.hidden {
	visibility: hidden;
	position: absolute;	
}*/

/*.nav-toggle.shown {
	visibility: visible;
	position: relative;
}*/

.dropdown-content-menubar{
	display:none;
	float: right;
}

.dropdown-content-menubar a{
	font-family: 'Oswald', Arial, Verdana, sans-serif;
	color: white;
	text-decoration: none;
	margin:4%;
	float:right;
}

@media screen and (max-width: 1001px){
	.dropdown-content-menubar{
		display:inline;
	}

	.nav-toggle {
		display: inline;
	}
}