/* NAVIGATION
--------------------------------------------- */

@media all and (max-width : 812px) {

	nav {
		margin: 0;
        margin-top: 50px;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;

	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: transparent;
		padding:14px 20px;	
		color:#444;
		font-size:17px;
		text-decoration:none;
		border:none;
        text-align: right;

	}

	.toggle:hover {
		color: #009c00;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
    text-align: right;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #fff;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#444;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #fff; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}
@media screen and (max-width:960px){
.carousel-caption h3 {

    font-size: 2.5em;

}
.carousel-caption h2 {
    width: 150%;
    font-size: 2em;
}


@media screen and (max-width:855px){
    #logo img {
        width: 200px;
    }
.carousel-caption h3 {
    font-size: 2em;
}
.carousel-caption h2 {
    width: 150%;
    font-size: 2em;
}
.carousel-caption p{
    font-size: 1em;
    line-height: 1.2em;
}
    #maincsfi p {
        margin: 0px 20px;
    }


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

    .carousel-caption h3 {
    font-size: 1.5em;
}
.carousel-caption h2 {
    width: 150%;
    font-size: 1.5em;
}

.carousel-caption h3 {
    font-size: 1.5em;
}
.carousel-caption h2 {
    width: 150%;
    font-size: 1.5em;
}
.carousel-caption p{
    font-size: 1em;
    line-height: 1.2em;
}
    
@media screen and (max-width: 768px) {
    #oddballout {
    display: none;
    }
    .icon-bar {
    background-color: #444;
}
    header h3 {
        display: none;
    }
   blockquote {
       font-size: 1em;
    }
}

    
@media screen and (max-width: 625px){
    #logo img{
        margin-left: 10px;
    }
    .carousel-caption h3 {
        font-size: 1.25em;
    }
    .carousel-caption h2 {
        width: 150%;
        font-size: 1.2em;
    }
    .carousel-caption p{
        font-size: .8em;
        line-height: 1em;
    }
    .article h1 {
        font-size:  1.75em;
    }

    .article h2, h3 {
        font-size: 1.2em;
    }
    .article p {
        font-size: 1em;
    }
    .benefits img {
        width: 100%;
        margin: 5px;
        padding: 0;
    }

    

@media screen and (max-width: 512px){
   
    header h1 {
        margin-top: 20px;
        margin-left: 10px;
    }

    .carousel-caption h3 {
        font-size: 1em;
    }
    .carousel-caption h2 {
        width: 150%;
        font-size: 1em;
    }
    .carousel-caption p{
        font-size: .75em;
        line-height: 1.2em;
    }

    #primary-content p {
        font-size: .8em;
        padding-bottom: 20px; 
    
}
    .deptofenergy {
        font-size: 1em;
    }
    #maincsfi h4 {
        font-size: 1em;
    }
@media screen and (max-width: 500px){

    .flex-rw {
        flex-flow: column;
    }
    .footer {
        width: 100%;
    }
    .footer-list-top {
        width: 100%;
    }
    .footer-list-header {
        font-size: 1.5em;
    }
    .footer-list-top li {
        font-size: 1.25em;
    }
    .mainspray h3 {
        font-size: 1em;
    }

    @media screen and (max-width: 460px) {
.article h1 {
        font-size:  1.25em;
    }

    .article h2, h3 {
        font-size: .8em;
    }
    .article p {
        font-size: .8em;
    } 
        
@media screen and (max-width: 425px){
    #logo img {
        margin-left: 3px;
    }
    header h1 {
        margin-top: 20px;
        margin-left: 10px;
    }
    
     .carousel-caption h3 {
        font-size: 1em;
    }
    .carousel-caption h2 {
        width: 150%;
        font-size: .8em;
    }
    .carousel-caption p{
        font-size: .60  em;
        line-height: 1.2em;
    }
    .flex-rw {
        flex-flow: column;
    }
    @media screen and (max-width: 390px) {
     .article h1 {
          text-align: center;
        }
    }
    
    
 /* Advantages - Features */