
/*** General ***/
	body{
		font-size: 16px;
	  line-height: 24px;
	}
	h1{
		font-size: 28px;
	  line-height: 28px;
	}
	h2{
		font-size: 	24px;
	}
	h3{
	  font-size: 22px;
	  line-height: 24px;
	}
	h4 {
	  font-size: 21px;
	  line-height: 25px;
	}
	h5 {
	  font-size: 18px;
	  line-height: 23px;
	}
	hr {
	  margin: 0 auto 15px;
	  height: 1px;
	  width: 100%;
	  margin: 0 auto 15px;
	}
	h1 { margin-bottom: 15px; }
	h2 { margin-bottom: 15px; }
	h3 { margin-bottom: 15px; }
	h4 { margin-bottom: 15px; }
	h5 { margin-bottom: 15px; }
	h6 { margin-bottom: 15px; }

	p { margin: 0 0 15px 0; }


	a.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
		padding: 11px 20px;
		border-radius: 5px;
	}
	.pageWrapper{
		min-height: 100%;
	}
	#pageContents{
		padding-top: 30px;
		width: 100%;
		margin-bottom: 20px;
	}
	#pageContents.no-padding{
		padding: 0px !important;
	}	
	.pageFooter{
		width: 100%;
	}
	.pagequickDial{
		display: none;
		bottom: 0px;
		width: 100%;
		height: auto;
	}
	.pageQuickDial a{
		font-size: 40px;
		padding: 10px;
		line-height: 64px;
	}

	.container, .section{
		position: relative;
	}
	.container{
		width: 82%;
	}
	.column, .columns{
		float: left;
		margin: 0 1% 40px;
	}
	.one.column{
		width: 98%;
	}
	.one-two.column{
		width: 48%;
	}
	.two-third.column{
		width: 63%;
	}
	.one-third.column{
		width: 32%;
	}
	.column-align-center{
		text-align: center;
	}
	.column-align-justify{
		text-align: justify;
	}
	.column-map .google-map-wrapper {
	  position: relative;
	}
	.not-top{
		padding-top: 40px;
	}
	.no-margin{
		margin: 0px !important;
	}
	.alignright {
	  margin: 15px 0px 15px 15px;
	}
	.alignleft {
	  margin: 15px 15px 15px 0px;
	}
	.fancy-heading .title {
	  font-size: 42px;
	  line-height: 42px;
	}
	.fancy-heading-line{
	  padding-bottom: 15px;
	}
/*** TOP BAR / MAIN MENU ***/
	#Top_bar{
		width: 100%;
	}
	#Top_bar .column{
		margin-bottom: 0;
	}
	#Top_bar .logo{
		float: left;
		margin: 0 30px 0 20px;
	}
	#Top_bar .menu_wrapper{
		float: unset;
	}
	#Top_bar .logo a {
		height: 90px; 
		line-height: 60px;
		padding: 15px 0px;
	}
	#Top_bar .logo img{
		max-height: 100%;
	}
	#Top_bar .menu-wrapper li a{
		font-size: 18px;
	}
	#Top_bar .menu-wrapper li ul li a{
		font-size: 16px;
	}
	#menu-main ul > li {
		margin: 0;
		float: left;
	}
	#menu-main ul > li > a{
		line-height: 60px;
		padding: 27px 0px;
		margin-left: 12px;
	}
	#menu-main ul > li > a:after{
	  height: 4px;
	  width: 100%;
	  left: 0;
	  top: -4px;
	}	
	#menu-main ul li a.menu-toggle {
		display: none;
    width: 48px;
    height: 48px;
    right: 12px;
    top: 6px;
    border-left: 1px solid rgba(0,0,0,0.03);
	}
	#menu-main ul li a.menu-toggle:hover #menu-main .sub-menu, #menu-main ul li a.menu-toggle:active #menu-main .sub-menu{
		display: block;
	}
	#menu-main ul > li > a > span:not(.description) {
		line-height: 60px;
		padding: 0px 18px;
	}
	#menu-main ul > li.menu-item-has-children > a :after { 
		width:0; 
		height:0; 
		top:50%; 
		right:5px; 
		margin-top:-2px; 
	}
	#menu-main ul > li .sub-menu{
	  left: 15px;
	  top: 70%;
	  margin: 0;
	}
	#menu-main ul > li .sub-menu > li {
		width: 230px;
		padding: 0;
	}
	#menu-main ul > li .sub-menu > li > a{
		font-size: 16px;
		padding: 6px 6px 6px 14px;
	}
	#Top_bar a.menu-toggle i {
		display: none;
	  font-size: 40px;
	  line-height: 45px;
	  top: 38px;
	  right: 10px;
	}
/*** BREADCRUMB ***/
	#Breadcrumb {
		padding: 30px 0px;
	}
	#Breadcrumb .column{
		margin-bottom: 0;
	}
	#Breadcrumb .title{
		font-size: 28px;
	  line-height: 28px;
    margin-bottom: 0;
    width: 60%;
	}
	#Breadcrumb .breadcrumb-menu{
	  width: 40%;
	  margin: 1px 0 0;
	  font-size: 1em !important;
	}
/*** FORM ***/
	.form-wrapper {
	  padding: 15px;
	  border-radius: 10px;
	  margin: auto;
	  width: 75%;
	}
	.form-wrapper.mainpage{
		margin: 130px 80px 0px 80px;
	}
	.form-wrapper form{
		height: 250px;
		padding-top: 10px;
	}
	.form-wrapper h1{
	  height: auto;
	}
	.form-wrapper p {
	  height: auto;
	  line-height: normal;
	  margin: 0;
	  padding: 0;
	}
	.contactForm{
		margin: 0;
		padding: 0;
	}
	.contactForm input[type=text], .contactForm textarea{
	  margin: 5px 0px ;
	  padding: 6px;
	  width: 100%;
	}
	.contactForm-submit{
	  margin: 10px 0px !important;
	  padding: 6px;
	  height: auto;
	  width: 100%;
	}
	#form-messages.success{
		padding:7px;
	}
	#form-messages.error{
		padding-bottom: 10px;
	}
/*** SECTIONS ***/
	.with_side .section-group{
		width: 65%;
		float: left;
	}
	.with_side .sidebar{
		width: 30%;
		float: right;
	}
	.section.full-width .section-wrapper{
		max-width: 100% !important;
	}
	.section.full-width .one.column{
	  width: 100%;
    margin: 0 !important;
	}
	.section-content{
		margin: 0 1%;
	}
	.section-content ul {
		margin: 0 0 15px 30px;
	  font-size: 15px;
	  line-height: 21px;
	}
	.section-content ul li {
    margin-bottom: 10px;
	}
/*** IMAGE FRAMES ***/
	.image-frame, .image-caption {
    border-width: 8px;
    max-width: 100%;
    line-height: 0;
  }
  img.scale-with-grid, #Content img {
    max-width: 100%;
    height: auto;
	}
	.image-frame .image-wrapper img:not(.ls-l) {
    top: 0;
	}
	.image-caption-text {
    margin: 0;
    padding: 10px 0 5px;
    line-height: normal;
   }
	.section-content .image-frame, .section-content .image-caption {
    margin-bottom: 20px;
	}
/*** GOOGLE MAP ***/
	.google-map {
		width: 100%;
	  height: 400px;
	  border-width: 8px;
	}
/*** STORY BOXES ***/
	.story-box{
		padding: 0px;
	}
	.story-box .story-desc h3{
		margin-left: 0;
		margin-top: 10px;
	}
	.story-box .story-desc hr{
		margin-left: 0;
		width: 20%;
	}
	.story-box .story-image{
		line-height: 0;
	}
	.story-box:hover .story-desc hr{
		width: 50%;
	}
/*** SLIDE SHOW ***/
	.slideshow-container {
	  max-height: 600px;
	}
	.slideshow-slide {
	  height: 600px !important;
	}
	.slideshow-slide img{
		width: 100%;
		height: 600px !important;
	}
	.slideshow-caption {
	  top: 40px;
	  left: 50px;
	  font-size: 45px;
	}
	.slideshow-buttons{
		bottom: 10px;
		width: 100%;
		margin: 0 auto;
	}
	.dot {
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	}
/*** FOOTER ***/
	#Footer .column{
		margin-bottom: 0;
	}
	#Footer .widgets{
		padding: 5px 0px;
	}
	#Footer .widgets .column{
		margin-bottom: 0px;
	}
	#Footer .footer a#back_to_top{
		margin: -10px 0 0 0 ;
	}
	#Footer .footer .one{
    margin-bottom: 20px;
    padding-top: 30px;
    min-height: 33px;
	}
@media (max-width: 1300px){
	/*** GENERAL ***/
		.container{
			width: 95%;
		}
	/*** TOP BAR ***/
		#Top_bar .logo{
			margin: 0 30px 0 20px;
		}
		#Top_bar .menu-wrapper li a{
			font-size: 17px;
		}
		#menu-main ul > li > a{
			margin-left: 0px;
		}
		#menu-main ul > li > a > span:not(.description) {
			padding: 0px 16px;
		}	
		#menu-main ul > li.menu-item-has-children > a > span:not(.description):after { 
			right:3px; 
		}	
		#menu-main ul > li .sub-menu{
		  left: 2px;
		}
		#menu-main ul > li .sub-menu > li {
			width: 200px;
		}
		#menu-main ul > li .sub-menu > li > a{
			font-size: 15px;
			padding: 6px 6px 6px 14px;
		}
}

/* from now on menu hidden & form is below on main page */
@media (max-width: 1200px){
	/*** GENERAL ***/
		a.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
			padding: 7px 20px;
		}
	/*** TOP BAR ***/
		#Top_bar .menu-wrapper li a{
			font-size: 18px;
		}
		#Top_bar a.menu-toggle i {
			display: block;
		}
		#menu-main{
			display: none;
			height:auto;
			position: absolute;
			right: 0px;
			top: 120px;
			width: 250px;
		}
		#menu-main ul > li{
			float: unset;
			clear: left;
			width: 100%;
		}
		#menu-main ul > li > a {
			padding: 0px;
			width: 65%;
			margin: auto;
		}
		#menu-main ul li a.menu-toggle {
			display: block;
		}
		#menu-main ul > li.menu-item-has-children > a > span:not(.description):after { 
			display: none; 
		}	

		#menu-main ul > li .sub-menu{
		  position: relative;
		}		
		#menu-main ul > li .sub-menu > li {
			width: 200px;
		}
		#menu-main ul > li .sub-menu > li > a{
			font-size: 16px;
			padding: 0px;
			width: 65%;
			margin: auto;

		}
	/*** FORM ***/
		.form-wrapper {
	  	padding: 10px;
	  	width: 80%;
		}	
		.form-wrapper.mainpage{
			margin: 130px 60px 0px 60px;
		}
}

@media (max-width: 1023px){
	/*** GENERAL ***/
		.container{
			width: 98%;
		}
	/*** TOP BAR ***/
		#Top_bar a.menu-toggle i {
			display: block;
		}
		#menu-main{
			height: auto;
			position: relative;
			width: 100%;
			top: 0px;
			text-align: center;
		}
		#menu-main > ul > li {
			float: left;
		}
		#menu-main ul > li.menu-item-has-children > a > span:not(.description):after {
   	  right: 285px;
   	  left: unset;
  	}
		#menu-main ul > li .sub-menu{
		  position: relative;
		  width: 100%;
		  text-align: center;
		  left: 0px;
		}
		#menu-main ul > li .sub-menu > li{
			width: 100%;
		}
  /*** FORM ***/
		.form-wrapper {
	  	padding: 10px;
	  	width: 85%;
		}	
		.form-wrapper.mainpage{
			margin: 130px 40px 0px 40px;
		}
	/*** SECTIONS ***/
		.with_side .section-group{
			width: 100%;
			float: unset;
		}
		.with_side .sidebar{
			width: 100%;
			padding-top: 15px;
			float: unset;
		}
}

/* only one column from now, form goes below*/
@media (max-width: 768px){
	/*** GENERAL ***/
		.pageQuickDial{
			display: block;
		}
		.one-two.column{
			width: 98%;
		}		
		.one-third.column{
			width: 98%;
			text-align: center;
		}
		.two-third.column{
			width: 98%;
		}
		.two-third.column h1{
			text-align: center;
		}
		.column, .column{
			margin: 0 1% 5px;
		}
		.not-top{
			padding-top: 25px;
		}
		img.scale-with-grid, #Content img{
			margin: auto;
		}
	/*** TOP BAR ***/
		#Top_bar a.menu-toggle i {
			display: block;
		}
		#menu-main{
			height: auto;
			position: relative;
			width: 100%;
			top: 0px;
			text-align: center;
		}
		#menu-main > ul > li {
			float: left;
		}
		#menu-main ul > li.menu-item-has-children > a > span:not(.description):after {
   	  right: 285px;
   	  left: unset;
  	}
		#menu-main ul > li .sub-menu{
		  position: relative;
		  width: 100%;
		  text-align: center;
		  left: 0px;
		}
		#menu-main ul > li .sub-menu > li{
			width: 100%;
		}
  /*** BREADCRUMB ***/
  	#Breadcrumb{
  		padding: 10px 0px;
  	}
  	#Breadcrumb .breadcrumb-menu{
  		margin-top: 5px;
  		width: 100%;
  		text-align: left;
  	}/*** FORM ***/
  	.form-wrapper.mainpage{
  		margin: 30px auto;
  	}
	/*** SLIDE SHOW ***/
  	.slideshow-container{
  		max-height: 450px;
  	}
  	.slideshow-slide img{
  		height: 450px !important;
  	}
  	.slideshow-caption{
  		top:35px;
  		left: 35px;
  		font-size: 35px
  	}
	/*** STORY BOX ***/
		.story-box{
			width: 75%;
			margin: auto;
		}
		.story-desc{
			padding-bottom: 30px;
		}
		.story-desc h3, .story-desc hr{
			margin-bottom: 10px;
		}

		/*** SLIDE SHOW ***/
  	.slideshow-container{
  		max-height: 300px;
  	}
  	.slideshow-slide img{
  		height: 300px !important;
  	}
  	.slideshow-caption{
  		top:30px;
  		left: 30px;
  		font-size: 30px
  	}
  	.dot{
  		width: 10px;
  		height: 10px;
  	}

}
/* hide some minor objects, breadcrumb below */
/* show call icon */
@media (max-width: 400px){
	/*** GENERAL ***/
		.fancy-heading-arrows i{
			display: none;
		}
		a.button{
			padding: 5px 10px;
		}
  /*** TOP BAR ***/
  	#Top_bar .logo{
  		margin: auto;
  	}
  	#Top_bar .logo a{
  		padding: 5px;
  	}
  	#Top_bar .logo img{
  		max-height: 75%;
  	}
  	#Top_bar a.menu-toggle i{
  		top:20px;
  	}
  
  /*** SLIDE SHOW ***/
  	.slideshow-container{
  		max-height: 250px;
  	}
  	.slideshow-slide img{
  		height: 250px !important;
  	}
  	.slideshow-caption{
  		top:30px;
  		left: 30px;
  		font-size: 30px
  	}
  	.dot{
  		width: 10px;
  		height: 10px;
  	}
	/*** FOOTER ***/
		#Footer .footer .one{
			margin-bottom: 0px;
		}
		#Footer .footer .copyright{
			float: unset;
		}
		#Footer .footer a#back_to_top{
			margin: none;
		}

}
