/***************************************************
****************************************************
**              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 (min-width: 768px) {
	nav.top-bar ul.title-area {
		float: left;
	}
}
@media only screen and (max-width : 938px) {
	.menu-overlay.on {
		top: 70px;
	}
}

@media only screen and (max-width: 768px) {
	#frontpage header.scroll {
		height: 50px;
		/*background: #fff;*/
	}

	.head.active .js-nav-search-toggle .nav-icon {
	    position: relative;
		top: -10px;
	}

	.tip-darkgray{
		display: none !important;
	}
	nav.top-bar ul.title-area {
		padding: 0 !important;
		/*margin: 0 0 0 5px;*/
		float: left;
	}
	.top-bar-section ul {
		padding: 0 0 1px;
		margin: 3px 9px 0 0;
	}
	#nav-toggle {
		top: 15px;
	}
	#nav-toggle.active {
		top: 24px;
	}

	/*#nav-toggle span:before,
	#nav-toggle span:after,
	#nav-toggle span,
	#nav-toggle.active span, 
	#nav-toggle.active span:after,
	#nav-toggle.active span:before {
		background: #fff;
	}*/

	.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: #2a2a2a;
	}

	.masthead-text h2,
	#frontpage .masthead-text h2 {
		font-size: 38px;
	}

	.masthead-text h4,
	#frontpage .masthead-text h4 {
		font-size: 18px;
	}

	#frontpage .top-bar-section ul li > a,
	#frontpage .scroll .top-bar-section ul li > a {
		color: #2a2a2a;!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 #2a2a2a, 0 16px 0 1px #2a2a2a, 0 22px 0 1px #2a2a2a;
		box-shadow: 0 10px 0 1px #2a2a2a, 0 16px 0 1px #2a2a2a, 0 22px 0 1px #2a2a2a;
		color: #2a2a2a;
		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: 'Poppins', 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 #mastslide {
		position: relative;
	}

	.masthead {
		height: 450px;
	}
	.masthead .inline {
		margin-left: 0;
	}

	.masthead-text,
	#frontpage .masthead-text {
		padding: 40px 0;
		margin-top: 50px;
		font-size: 24px;
		top: inherit;
		transform: none;
	}

	header.head {
		/*background-color: #fff;*/
		background-image: none;
		height: 50px;
	}

	header.head .top-bar {
		overflow: visible;
	}

	header.head img.top {
		width: 92px;
		padding: 10px 0;
	}
	header.head.scroll img.top {
		width: 92px;
		padding: 2px 0;
	}

	#frontpage .content {
		top: 0;
	}

	#second,
	.mast_large {
		height: 300px;
		/*margin-top: 50px;*/
	}





/********************************
********** |6| Footer ***********
********************************/
	
	footer .ftr-main {
		padding: 40px 0;
		text-align: center;
	}
	
	footer .social-outline {
		width: 36px;
		height: 36px;
		font-size: 18px;
		padding: 9px 4px;
	}

	footer .foot-popular ul {
		display: block;
		margin: 0 auto;
		text-align: center;
	}

	footer .foot-contact .info .row {
		margin-bottom: 5px;
	}

	footer .foot-contact .info i {
		display: block;
		text-align: center;
		margin: 0 auto;
	}

	footer .foot-contact .info p {
		margin: 10px auto 15px;
		padding-left: 0;
		text-align: center;
	}

	footer .foot-contact h3 {
		color: #268a94;
		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 .copy {
		padding: 20px 0;
	}

	footer .signup .x-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-contact .hp-addr p {
		margin: 0;
		font-style: normal;
	}
	
	footer .copy .row.centered {
		width: 220px;
		line-height: 14px;
	}

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

	h2,
	section h2 {
		font-size: 40px;
	}

	h4,
	section h4 {
		font-size: 16px;
	}

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

	#frontpage #filter li a {
		padding: 7px 14px;
	}

	.section-title h2 {
		font-size: 40px;
	}

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

	.main-cnt h1 {
		font-size: 26px; 
	}

	.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;
	}

	.calltoaction h2 {
		font-size: 42px;
	}


/****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;
	}

	#frontpage #second {
		height: auto;
	}

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

	.webstuff .image {
		margin: 25px 0;
	}

	.service {
		text-align: center;
	}

	.service:hover {
		padding: 15px 25px;
	}

	.service div {
		position: relative;
	}

	.service:hover div {
		top: 0;
	}

	.service p {
		opacity: 1;
		visibility: visible;
		height: auto;
	}

	.service h3 {
		font-size: 16px;
		padding: 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;
	}

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

	}

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

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

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

	section.testimonial-block blockquote:before {
		font-size: 45px;
		left: 10px;
	}

	.testimonial-block ul li {
		padding: 0;
		margin: 10px 0 0 !important;
	}

	.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;
		
		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  */

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

	nav.overlay {
		overflow: auto;
	}

	nav.overlay .menu-list {
		margin: 70px auto 0;
	}

	nav.overlay ul.social.icons li {
		margin-bottom: 10px;
		display: inline-block;
	}
}

@media (max-width: 768px) {
	.nav.overlay ul.social {
		margin-top: 20px;
	}

	.profilepicgrid {
		max-width: 300px;
	    margin: 0 auto;
	    float: none;
	}
}

@media only screen and (max-width: 450px) {
	#navbar-search {
		display: block;
		width: 100%;
		margin: 0 auto;
	}

	.nav-search button {
		max-width: 320px;
		width: 100%;
		display: block;
		margin: 5px auto;
	}
	
	nav.overlay .menu-list {
		margin: 20px auto 0;
	}
}

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

@media only screen and (max-width: 720px){
	.work, .work.width-2, .work.width-2 .overlay {
	    max-width: 300px;
	    background-size: cover;
	    background-position: center;
	}

	.projs .work {
		max-width: 100%;
	}

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

	.work .overlay {
		/*opacity: 1;*/
		display: block;
	}

	#portfoliov2_projects .work .overlay dt {
		font-size: 20px;
	}

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

@media only screen and (max-width: 1115px){
	.mast_large {
		height: 300px;
	}

	.mast_large h1, 
	.mast_large h5 {
		font-size: 40px;
	}
}

@media only screen and (max-width: 1400px) {
	.mast_large {
		background-attachment: initial;
		background-size: cover;
	}

	.home section,
	section.profit,
	section.profit.orange,
	section.gray,
	section.calltoaction,
	.subpage-cat-block,
	.subpage-block {
		padding: 70px 0;
	}
}

/********************************
****** |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;
	}
	
}