/* GENERAL SECTIONS */
* {
    margin:0;
    padding:0;
    font-family:sans-serif;
    box-sizing:border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	color: inherit;
	font-weight: 700;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
}

/* HEADER SECTION */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #0066FF;
	color: #FFFFFF;
	padding: 1.25em 1.25em 1.25em 1.25em;
	z-index: 100;
}

#logo {
	font-size: 1.2em;
	cursor: default;
}

#logo h1 {
	display: inline-block;
	text-transform: uppercase;
}

/* MAIN CONTENTS */
img {
    width:350px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	height:350px;
}

.container {
    margin-top: 88px;
	background-color: gray;
}

.breaker{
    clear:both;
}

.water {
	float:right;
	background-color:#CCFFCC;
	width:35%;
	padding:25px;
	margin:10px;
	text-align: justify;
}

.nitrogen {
	float:left;
	background-color:#CCFF99;
	width:35%;
	padding:25px;
	margin:10px;
	text-align: justify;
}

/* BOTTOM SECTION */
article {
    width:100%;
    text-align:left;
    color:white;
    height:45px;
    padding: 10%;
    float:left;
}

#a1{
    background-color:#FF0000;
}

/* RESPONSIVE SETTINGS */
/* Tablet and large mobile screen */
@media all and (max-width:1100px) {
	.water {
		width:100%;
		margin:0;
	}

	.nitrogen {
		width:100%;
		margin:0;
		margin-bottom:100px;
	}
	
	#cycles{
	    width: 100%;
		display: table;
	    margin-left: auto;
		margin-right: auto;
	}
		
    section{
        float: left;
        width: 70%;
    }
}

/* small mobile screen */
@media all and (max-width: 480px) {
    #cycles{
		width: 100%;
        float: none;
    }
    
    section{
		width:100%;
    }
}