/***************************************************
****************************************************
**              EFELLE MEDIA STYLES               **
**              © efelle media 2013               **
**                                                **
**               Table of Contents                **
**                                                **
**  |1| Core Styles         |7| Special Cases     **
**  |2| Nav Styles          |8| Carousel          **
**  |3| Icons	            |9| Isotope           **
**  |4| Arrows             |10| Foundation App    **
**  |5| Masthead                                  **
**  |6| Footer                                    **
**						                          **
****************************************************
***************************************************/


/********************************
******** |1| Core Styles ********
********************************/
/*body { 
    width: 100%;
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    overflow-x: visible;
	overflow-y: scroll;  	
	-webkit-overflow-scrolling: touch;
}

html { 
    width: 100%;
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    overflow-x: visible;
	overflow-y: scroll;  	
	-webkit-overflow-scrolling: touch;
}*/


/********************************
******** |2| Nav Styles ********
********************************/

@media only screen and (max-width: 58.75em) {

	.tip-darkgray{
		display: none !important;
	}
	nav.top-bar ul.title-area {
		padding: 0;
		margin: 0 0 0 5px;
	}
	.top-bar-section ul {
		padding: 0 0 1px;
		margin: 3px 9px 0 0;
	}
/*	#subpage header, 
	#subpagefull header, 
	#subpage_fbv2 header,
	#subpage_prof header, 
	#subpage_serv header, 
	#blog header, 
	#blogpost header, 
	#subpage_portfoliov2 header,
	#subpage_testimonials header {
		height: 45px;
	}*/

	.top-bar {
		/*border-bottom: 4px solid #4d7485;
		height: 48px;*/
		/*-webkit-transition: all .2s ease-in-out; 
		-moz-transition: all .2s ease-in-out;
    	-ms-transition: all .2s ease-in-out;
    	-o-transition: all .2s ease-in-out;
    	transition: all .2s ease-in-out;*/
	}

	.top-bar.expanded {
/*		-webkit-transition: height .5s linear;
    	-moz-transition: height .5s linear;
    	transition: height .5s linear;*/
	}

	.top-bar.expanded .title-area {
		background: #fff;
	}

	.top-bar-section ul {
		z-index: 999;
		position: relative;
	}

	.top-bar-section ul li {
		border-top: 2px solid #c1cdd2;
		margin-bottom: 0;
		padding-left: 0;
	}

	.top-bar-section ul li.sub_1 {
		border-top: 2px solid #4d7485;
	}

	.top-bar-section ul, .top-bar-section li a:not(.button) {
		background-color: #fff;
	}
	.top-bar.expanded .toggle-topbar a {
		color: #094968;
	}

	#frontpage .top-bar-section ul li > a,
	#frontpage .scroll .top-bar-section ul li > a {
		color: #094968;!important;
		font-size: 17px;
		font-weight: 300;
	}
	.top-bar .toggle-topbar.menu-icon a span,
	.top-bar.expanded .toggle-topbar a span,
	#lftside-menu span {
		-webkit-box-shadow: 0 10px 0 1px #000, 0 16px 0 1px #000, 0 22px 0 1px #000;
		box-shadow: 0 10px 0 1px #000, 0 16px 0 1px #000, 0 22px 0 1px #000;
		color: #000;
		position: absolute;
		right: 15px;
		display: block;
		width: 16px;
		height: 0;
	}

	.menu-button {
		margin-top: 0;
		height: 78px;
		width: 100%;
		right: 0;
		background: transparent url('../graphics/efellemobilev2-full-logo.png') center center no-repeat;
	}

	#frontpage .menu-button {
		height: 70px;
	}

	.menu-button a {
		position: relative;
		display: block;
		width: 50px;
		height: 34px;
		line-height: 33px;
		padding: 0;
	}

	img.mob-head {
		position: absolute;
		top: 0;
		left: 70px;
	}

	.top-bar-section li a:not(.button) {
		background: #f3f3f3;
		z-index: 1000;
	}

	.top-bar-section ul li > a {
		width: 100%;
		/*margin-right: 15px;*/
	}

	.sidr ul li {
		background-image: none;
	}

	.sidr ul li ul li {
		line-height: 33px
	}

	.sidr ul li a, .sidr ul li span,
	.sidr ul li ul li a, .sidr ul li ul li span {
		padding: 0 15px;
		display: block;
		text-decoration: none;
		font-family: 'Open Sans', sans-serif;
		font-style: normal;
	}

	.sidr ul li a, .sidr ul li span {
		color: #fff;
		font-weight: 600;
		font-size: 17px;
	}
	.sidr ul li ul li a, .sidr ul li ul li span {

		color: #fff;
		font-weight: 600;
		font-size: 13px;
	}


}

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

/********************************
********* |5| Masthead *********
********************************/


	#frontpage header.head {
		background-color: #fff;
		background-image: none;
		height: 48px;
	}

	#frontpage .content {
		top: 0;
	}

	#second {
		/*height: 60px;*/
		height: auto;
		text-align: right;
	}

	#second h1,
	#second h2,
	#second h3,
	#second h4,
	#second h5,
	#second h6 {
		margin-top: 20px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		color: #fff;
		font-size: 24px;
	}




/********************************
********** |6| Footer ***********
********************************/

	footer .ftr-main {
		padding: 0 0 12px;
	}

	#frontpage footer .ftr-main {
		padding: 15px 0 25px;
	}

	footer .foot-contact h3 {
		color: #6ab0d1;
		font-size: 30px;
		font-weight: 300;
	}

	footer .foot-contact h4 {
		color: #fff;
		font-size: 24px;
		font-weight: 300;
		text-transform: uppercase;
	}

	footer .foot-contact p {
		font-size: 12px;
		font-weight: 300;
		margin-bottom: 25px;
	}

	footer .news-signup {
		height: 180px;
		padding: 25px 0;
	}

	footer .news-signup input {
		width: 58%;
	}

	footer .signup .small.instant.button {
		width: 40%;
	}

	footer .foot-services {
		margin-top: 25px;
	}

	.foot-services .logo, 
	.foot-services .social {
		text-align: center;
	}

	footer .foot-services p {
		margin: 20px 0;
		width: 90%;
		text-align: justify;
	}

	.foot-popular {
		margin-bottom: 25px;
	}

	footer .foot-popular ul li {
		width: 33%;
		margin: 0 30px 0 20px;
		float: left;
		/*border-bottom: none;*/
	}

	footer .foot-contact .hp-addr p {
		margin: 0;
		font-style: normal;
	}
	
	footer .copy .row.centered {
		width: 220px;
		line-height: 14px;
	}

/********************************
******* |7| Special Cases *******
********************************/

	ul, ul li {
		margin-bottom: 0;
	}

	.main-cnt ul,
	.portfolio ul,
	.calltoaction.subpage-block ul.buttons {
		margin-bottom: 20px;
	}

	.main-cnt ul li {
		margin-bottom: 10px;
	}

	.main-cnt.shadow.testimonial,
	.main-cnt {
		padding: 25px 0 0;
	}

	#blogpost .main-cnt {
		padding: 10px 0 0;
	}

	.social-share-buttons {
		margin-bottom: 12px;
	}

	.button.small {
		padding: 14px 25px;
	}

	.inline.buttons {
		text-align: center;
	}

	.inline.buttons li,
	.profit .inline li {
		padding-left: 7px;
		padding-right: 7px;
	}


/****homepage****/

	.arrow {
		display: none;
	}

	.html5banner {
		margin: 10px 0 0;
		padding: 0;
		width: 100%;
	}

	.html5banner img {
		width: 100%;
	}

	div.premier {
		margin: 20px 0 30px;
	}

	div.premier h2 {
		margin-top: 15px;
	}

	section.help .row {
		padding: 20px 0;
	}

	section.help .txt .row {
		padding: 0;
	}

	section.help  .image {
		margin: 0 auto 10px;
	}

	section.help .txt p {
		width: 100%;
		text-align: justify;
	}

	#frontpage #second {
		height: auto;
	}

	#frontpage #second .webstuff-arrow {
		display: none;
	}

	.webstuff .image {
		margin-top: 27px;
		margin-bottom: 27px;
	}

	.profit h2 {
		font-size: 22px;
		font-weight: 300;
		margin-top: 20px;
		margin-bottom: 7px;
	}

	.profit h4 {
		font-size: 14px;
		font-weight: 300;
		font-style: italic;
		color: #092836;
	}

	.service {
		text-align: center;
		padding: 100px 35px 10px;
	}

	.blog-block {
		margin: 20px 0;
	}

	#frontpage #blogblock3 .blog-entry .row{
		border-bottom: none;
	}

	#blogblock4,
	#frontpage #blogblock5,
	#frontpage #blogblock6 {
		display: none;
	}

	.clients-block .image {
		margin-top: 40px;
		margin-bottom: 10px;
	}

	.caroufredsel_wrapper {
		margin: 0!important;
	}

	.clients-block {
		padding-bottom: 30px;
	}
	
	.portfolio {
		margin: 12px 0;
	}

	#options h2 {
		margin: 5px 50px 5px 20px
	}

	#filter {
		margin: 5px 5px 5px 20px;

	}

	#filter li {
		margin: 5px 10px;
	}

	.full-port {
		background: #6ab0d1 url(../graphics/blue-gears.jpg) 50% 0 no-repeat fixed;
		text-align: center;
		padding: 20px 0;
	}

	section.testimonial-block blockquote {
		font-size: 14px; 
	}

	.calltoaction ul.buttons {
		margin: 0 0 20px;
	}

	div.firststep {
		margin: 20px 0 25px;
	}

	/***** Subpages *****/

	.blog-block.subpage-block {
		margin: 20px 0 5px;
	}

	.blog-block.subpage-cat-block {
		margin: 25px 0 20px;
	}

	.blog-block.subpage-cat-block ul.buttons {
		margin-top: 0;
	}

	.calltoaction.simple div.firststep {
		margin: 20px 0;
	}

	.calltoaction.simple ul.buttons {
		margin: 0 0 12px;
		text-align: center;
	}

	.calltoaction.simple ul.buttons li {
		padding-left: 0;
	}


	/**** SERVICE PAGES *****/

	.eser_detail .textcolumn h3 {
		/*margin-top: 30px;*/
	}


	/**** SUBPAGE PROFILES - GRID ****/

	.profilepicgrid {
		float: left;
		margin: 15px 0;
		width: 100%;
	}

	/**** PROFILE DETAIL PAGE ****/

	blockquote.profilequote {
		font-size: 16px;
		font-weight: 700;
		font-style: italic;
		border-left: none;
		padding: 50px 0 10px 22px;
		margin: 0 0 20px;
	}

	.profilesidebar {
		margin-top: 20px;
	}

	/**** BLOG ****/

	#blog #second {
		height: 100px;
	} 

	/*#blog .main-cnt {
		padding: 25px 0;
	}*/

	.blog_main_wrapper {
		bottom: -7px!important;
		padding-left: 0;
		padding-right: 0;
	}

	.blog_main_wrapper .cont_wrapper {
		margin-bottom: 35px;
	}

	.post_image {
		width: 100%!important;
		height: auto!important;
	}

	.post_overview {
		margin: -40px 0 0!important;
		width: 100%!important;
		padding-left: 20px;
		padding-right: 20px;
	}

	.blog_pagination {
		margin-right: 20px;
	}

	#commentform .right {
		margin: 10px 0 0;
	}

	#commentform .right.alignright.inline-block {
		margin-left: 22px;
		float: left!important;
	}



	#commentform .right p {
		width: auto!important;
		display: block!important;
	}

	#commentform .left {
		padding: 10px 20px;
	}

	.post_author_wrapper {
		padding: 12px 5px;
	}



	/**** CONTACT US ****/

	.form_submit input {
		margin: 0!important;
	}

	#subpage_fbv2 .main-cnt {
		padding: 25px 20px;
	}

	#subpage_fbv2 .contact-top .divider {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	#subpage_fbv2 .form_field_title, #subpage_fbv2 .form_field_element, #subpage_fbv2 .form_field_element .form_field_half {
		display: inline-block;
		width: 100%;
	}

	#subpage_fbv2 .form_field_element .form_field_half {
		width: 95%;
		margin-bottom: 8px;
	}

	#subpage_fbv2 .form_field_title {
		font-size: 16px;
		font-weight: 300;
		margin-bottom: 5px;
	}

	#subpage_fbv2 .main-cnt .large-9 {
		padding-left: 0;
		padding-right: 0;
	}

	/*****TESTIMONIALS****/

	.main-cnt .testimonial-short {
		margin: 0 0 20px;
	}

	.testimonial-short .testimonial-text p {
		padding: 15px 0 10px;
	}

	.testimonial-short .testimonial-image .testimonial-contact {
		padding: 10px 0 0 90px;
	}

	.testimonial-short .testimonial-image img {
		padding: 0!important;
	    -webkit-border-radius: 70px;
	    -moz-border-radius: 70px;
	    border-radius: 70px;
	    height: 70px;
	    width: 70px;
	    border: #e5e7e8 solid 1px;
	}

	.large-9.columns.testimonial h1 {
		padding-bottom: 0;
	}

	/****TESTIMONIAL DETAIL****/

	.testimonial_text {
		margin-bottom: 25px;
	}

	.testimonial_detail h1 {
	    margin-bottom: 0;
	}

	.testimonial_detail .testimonial_blurb {
		margin-bottom: 40px;
	}

} /*  END @media max-width 768px  */

/********************************
********** |9| Isotope **********
********************************/

@media only screen and (max-width: 372px){
	.work, .work.width-2, .work.width-2 .overlay {
	    width: 100%!important;
	}

	.work, .work.height-2 {
		height: auto!important;
	}

	.work .overlay, .work .overlay:hover {
	    height: 0px!important;
	    width: 0px!important;
	    display: none!important;
	}
}

/********************************
****** |10| Foundation App ******
********************************/

/*** NEW EDITS FOR MOBILE ***/


footer .foot-services .logo {
	padding: 15px; 
}


@media only screen and (max-width: 450px) {
	footer .social img {
		max-width: 40px;
	}
	footer .foot-popular,
	footer .foot-popular ul {
		text-align: center;
	}
	footer .foot-popular ul li {
		width: 45%;
		margin: 0 3px 0 2px;
	}
	.info .ico-cnt {
	    height: 50px;      /* equals max image height */
	    width: 50px;
	    /*border: 1px solid red;*/
	    white-space: nowrap;
	    
	    text-align: center; 
	    margin: 1em 0;
	}

	.info .ico-cnt .helper {
	    display: inline-block;
	    height: 100%;
	    vertical-align: middle;
	}

	.info .ico-cnt img {
	    /*background: #3A6F9A;*/
	    vertical-align: middle;
	    max-height: 50px;
	    max-width: 50px;
	}
	
}