/*
Simple Responsive Template v 1.2


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.



BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/

/* typography */
body{
	color:#666;
	font-family:'Ubuntu', Arial, Helvetica, sans-serif; 
	font-size:1em;
	line-height:1.4em; 
	font-weight:normal;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
	font-family:'Droid Serif', Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.45em 0;
	padding:0;
} 


/* links */
a,
a:visited,
a:active
{color:#f1592a; text-decoration:none;}

a:hover{  color:#94c83d;}

.collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}


/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}

  
/* structure */   
.wrapper{
	width: 92%; 
	margin: 0 auto;
}

header{ 
	padding:15px 0;
}
#banner{ 
	text-align:center;
}
	
#hero,
#page-header{
	background:#f3f3f3;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	padding:20px 0;
}
#hero h1{ 
	line-height:1.2em;
	margin-top:0px;
	margin-bottom:10px;}

.flexslider{
	display:none;
}

.fb-button {
	display:block;
	height:20px;
	width:50px;
	text-indent:-999999px;
	background:url(../images/facebook.png) left top;
}

.fb-button:hover {
	background:url(../images/facebook-hover.png) left top;
	}

#content {  
	margin:40px 0;
}

aside { 
	margin:40px 0;
}

p{ margin:0 0 1.5em;}


/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}

.top-text {
	width:100%;
	display: block;
	text-align: center;
	margin: 0 auto;
	position: relative;
	background-position: center;
}

.telephone-link{
	width:100%; 
	display: block;
	text-align: center;
	margin: 0 auto;
	position: relative;
	background-position: center;
}

.addresshomepage {
	width: 50%;
	text-align: center;
}

/*MAIN MENU*/
.menu-toggle{
	display:block;
	padding:10px;
	margin:5px 0 0;
    border-top:5px solid #fff;
	background:#666;
	color:#fff;
	text-align:center;
	width:100%;
	cursor:pointer;
	text-transform:uppercase;
	font-size:20px;
}

.menu-toggle:hover{
	background:#f1592a;
}

.menu-toggle.toggled-on{
	background:#94c83d;
}
.srt-menu{
	display:none;
}	
.srt-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
}

.srt-menu{
	clear:both;
	margin-bottom:60px;
	
}
.srt-menu li a {
	background:#dadada;
	display:block;
	margin:1px 0; 
	padding:10px;
	text-align:center;
	text-decoration:none;
}
.srt-menu li a:hover{
	background:#f1592a;
	color:#fff;
}
.srt-menu li li a {
	background:#e8e8e8;
	padding-left:40px;
}
.srt-menu li li li a {
	background:#efefef;
	padding-left:80px;
}

/*SECONDARY MENU*/
#secondary-navigation{
	margin-bottom:60px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#f1592a;
	color:#fff;
}

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-bottom:40px;
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/*FOOTER*/
footer{  
	clear:both;
	font-size:80%;
	padding:20px 0;
}
footer ul{
	margin:0;
	padding:0;
}

/*colors and backgrounds*/
body{
	background:#fff;
}
h1, h2, h3, h4, h5, h6{
	color:#94c83d; 
}

footer{ 
	background:#333;
	color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{ 
	color:#CCC; 
	margin-bottom:10px;
}
footer ul{
	margin:0 0 0 8%;
}

a.buttonlink{ 
	background:#f1592a; 
	border-radius:7px; 
	color:#fff;
	display:inline-block;
	margin:10px 15px 10px 0; 
	padding:10px;
	text-decoration:none;
}
a.buttonlink:hover{
	background:#8dbc01;
}
.greenelement{
	background:#94c83d;
	color:#fff;
}
.violetelement{
	background:#887dc2;
	color:#fff;
}

.orangeelement{
	background:#f1592a;
	color:#fff;
}

 .video-container {
    position: relative;
     width: 50%;
     height: 0;
     padding-bottom: 56.25%;
	 margin: 0 auto;
 }

 .video-frame {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}

.content-black {
	background:#444;
	color:#fff;
}

.content-black h3{
	color: #fff;
	text-align: center;
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 980px) {
.wrapper {
	max-width:980px; 
	margin:0 auto;
	}
} 

.green-text {
	color:#94c83d;
}


.orange-text h3 {
	color:#f1592a;
}

/*
MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/


.cp-tab-content {
  padding: 10px 0;
}


.cp-accordion {
  width: 100%;
}

.cp-tab {
  position:relative;
}

.cp-tab-heading {
	font-weight:normal;
	font-family:'Droid Serif', Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	padding:0;
	display:block;
	padding:10px 0;
	color:#94c83d;
	font-size: 1.17em;
	width:100%;
	border-top:1px solid #000;
}


.cp-tab-content {
  display: none;/*needed for JS */
}

/* Desktop version */
.check-box {

}

@media (min-width:981px) {
  .cp-tab-content::before {
    content:'';
    position:absolute;
    top:0;
    display:block;
    width:100%;
    height:50px;
    z-index:10;
  }

}

@media (max-width:981px) {

a.buttonlink{ 
	display:block;
	text-align:center;
}
}

@media only screen and (max-width: 550px) {
	.telephone-link{
		width:290px;
		margin: 0 auto;
	}
}

@media only screen and (min-width: 320px) {
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:10px; /*this depends on the height of the logo*/
	float:right;
}
	


}




@media (min-width:981px) {
  .cp-tab-content::before {
    content:'';
    position:absolute;
    top:0;
    display:block;
    width:100%;
    height:50px;
    z-index:10;
  }

}

@media only screen and (max-width: 550px) {
	.telephone-link{
		width:290px;
		margin: 0 auto;
	}
}

@media only screen and (min-width: 320px) {
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:10px; /*this depends on the height of the logo*/
	float:right;
}
	


}