/*
Theme Name: Interface Child
Version: 1.0
Description: A child theme of Interface
Template: interface
*/

@import url("../interface/style.css");


@font-face {
    font-family: 'DaxRegular';
    src: url('fonts/dax-regular-webfont.eot');
    src: url('fonts/dax-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dax-regular-webfont.woff2') format('woff2'),
         url('fonts/dax-regular-webfont.woff') format('woff'),
         url('fonts/dax-regular-webfont.ttf') format('truetype'),
         url('fonts/dax-regular-webfont.svg#dax-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DaxBold';
    src: url('fonts/dax-bold-webfont.eot');
    src: url('fonts/dax-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dax-bold-webfont.woff2') format('woff2'),
         url('fonts/dax-bold-webfont.woff') format('woff'),
         url('fonts/dax-bold-webfont.ttf') format('truetype'),
         url('fonts/dax-bold-webfont.svg#daxbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


body,
input,
textarea {
	font: 14px 'DaxRegular', Arial, sans-serif;
	line-height: 20px;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: #229e4c;
}

::selection {
	background: #6fbb4b;
	color: #fff;
}
::-moz-selection {
	background: #6fbb4b;
	color: #fff;
}

/* =Links
-------------------------------------------------------------- */
a {
	color: #229e4c;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	color: #137e38;
	text-decoration: none;
}
#content ul a,
#content ol a {
	color: #229e4c;
}
#content ul a:hover,
#content ol a:hover {
	color: #137e38;
	text-decoration: none;
}


/* =Logo
-------------------------------------------------------------- */
#site-logo {
    float: left;
    margin-top: 16px;
}

@media only screen and (max-width: 479px) {
#site-title a img {
	max-width: 226px !important;
}
}

/* =Menu
-------------------------------------------------------------- */

#access a {
	color: #6d6e71;
	text-transform: none;
	padding: 44px 0 0;
	height: 56px;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
	color: #16a049;
}

@media only screen and (min-width: 769px) {
/* Dropdown */
#access ul li ul {
	background-color: none;
	top: 89px;
	border: none;
	padding-top: 11px;
	background: url("drop_down_arrow.png") no-repeat 10px 0;
	-webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2); 
}
#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
	font-size: 14px;
	color: #fff;
	text-transform: none;
	background-color: #16a049;
}
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
	background-color: #22af56;
	color: #fff;
}
} /* END 769px Min Break point */

@media only screen and (min-width: 1100px) {
#access a {
	font-size: 16px;
}
} /* END 1100px Min Break point */


/* =Search Form
-------------------------------------------------------------- */
.search-toggle {
	margin-top: 44px;
}
.search-toggle:hover,
.hgroup-right .active {
	color: #16a049;
}


/* =Slogan
-------------------------------------------------------------- */
.slogan-wrap {
	background-color: #6fbb4b;
	border-top: none;
	background-image: url("slogan_bg.jpg");
}

/* =Promotional Bar Widget
-------------------------------------------------------------- */
.widget_promotional_bar {
	background-color: #d4eac9;
	border-left: none;
}
.widget_promotional_bar .promotional-text {
	font-size: 23px;
	line-height: 28px;
	font-weight: normal;
	text-transform: none;
	color: #222;
	width: 85%;
}
.widget_promotional_bar .promotional-text span {
	font-size: 18px;
	color: #666;
}

/* =Call To Action Button
-------------------------------------------------------------- */

.call-to-action {
	color: #fff;
	font-size: 16px;
	line-height: 24px;
	text-transform: none;
	background-color: #229e4c;
}
.call-to-action:hover {
	background-color: #137e38;
	color: #fff;
}
input[type="reset"],
input[type="button"],
input[type="submit"] {
	font-size: 16px;
	background-color: #229e4c;
}
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background-color: #137e38;
}

/* =Page Title
-------------------------------------------------------------- */
.page-title-wrap {
	background-color: #6fbb4c;
	border: none;
	background-image: url("slogan_bg.jpg");
}
.page-title {
	font-size: 30px;
	padding-top: 6px;
}

/* =Main Content Area
-------------------------------------------------------------- */
#main {
	background-color: #fff;
	background-image: url("main_bg.jpg");
}
/* Column */
.one-thirds a, .two-thirds a {
	margin-bottom: 0;
	display: inline;
}
.one-thirds, .two-thirds, .thirds-one, .thirds-two {
	padding-bottom: 30px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.one-thirds, .two-thirds, .thirds-one, .thirds-two {
	margin: 0 0 0 3.44%;
	width: 96.5%;
}
} /* END 480 Min and 767px Max Break point */

@media only screen and (min-width: 768px) {
.one-thirds, .two-thirds, .thirds-one, .thirds-two {
	float: left;
}
.one-thirds {
	width: 30.36%;
	margin: 0 0 0 2.97%;
}
.two-thirds {
	width: 60.72%;
	margin: 0 0 0 4.97%;
}
.thirds-one {
	width: 30.36%;
	margin: 0 0 0 4.97%;
}
.thirds-two {
	width: 60.72%;
	margin: 0 0 0 2.97%;
}
} /* END 768px Min Break point */


/* =Widgets
----------------------------------------------- */
.widget-title {
	font-size: 24px;
	text-transform: none;
}
.widget-title,
.widget-title a {
	color: #229e4c;
}
.widget-title a:hover {
	color: #137e38;
}

/* =Home Page
----------------------------------------------- */
.servicesBlock {
	float: left;
	clear: both;
	width: 70%;
	padding-left: 15%;
	padding-right: 15%;
	display: block;
	text-align: center;
}
.servicesIcon, .servicesText {
	float: left;
	clear: both;
	width: 100%;
	display: block;
	text-align: center;
}
.servicesBlockCenter {
	margin: 20px 0;
}
.servicesIcon img {
	-webkit-border-radius: 32px;
	-moz-border-radius: 32px;
	border-radius: 32px;
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.servicesText h2 {
	color: #16a049;
	font-size: 24px;
	font-weight: bold;
	padding-top: 15px;
}
@media only screen and (max-width: 768px) {
.servicesBlockFirst {
	margin-top: -88px;
	z-index: 100;
	position: relative;
}
} /* END 768px Max Break point */

@media only screen and (min-width: 769px) {
.servicesBlock {
	clear: none;
	width: 30%;
	padding: 0;
	margin-top: -95px;
	z-index: 100;
	position: relative;
}
.servicesBlockCenter {
	margin-bottom: 0;
	margin-left: 5%;
	margin-right: 5%;
}
.servicesText h2 {
	font-size: 18px;
	line-height: 22px;
}
} /* END 769px Min Break point */

@media only screen and (min-width: 1078px) {
.servicesText h2 {
	font-size: 22px;
	line-height: 30px;
}
} /* END 1078px Min Break point */

.widget_recent_work img {
	border: 1px solid #eee;
}
#content .custom-gallery-title,
.custom-gallery-title a {
	color: #229e4c;
	text-transform: none;
}
.custom-gallery-title a:hover {
	color: #137e38;
}




/* =Services Page
----------------------------------------------- */

.thirds-two ul li, .thirds-two ol li {
	margin: 0 0 5px 0;
}
.serviceSection {
	padding: 20px;
}
.serviceWhite {
	background-color: #fff;
}
.serviceGrey {
	background-color: #f6f6f6;
}
.serviceCenter {
	text-align: center;
}
.serviceCenter em {
	max-width: 250px;
}
.servicesProjectImg {
	width: 80%;
	margin: 0 0 5px 0;
	border: 1px solid #eee;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.servicesProjectImg {
	width: 50%;
}
} /* END 480 Min and 767px Max Break point */

@media only screen and (min-width: 768px) {
.servicesProjectImg {
	width: 70%;
	margin: 0;
}
} /* END 768px Min Break point */

@media only screen and (min-width: 1079px) {
.servicesProjectImg {
	width: 75%;
}
} /* END 1079px Min Break point */



/* =Projects Page
----------------------------------------------- */

.two-thirds ul li, .two-thirds ol li {
	margin: 0 0 5px 0;
}
.projectImg {
	width: 80%;
	margin: 0 0 5px 0;
}
.projectSnippet {
	font-size: 16px;
	line-height: 22px;
	background-color: #fff;
	border: 1px solid #eee;
	padding: 20px;
	text-align: center;
	margin-bottom: 20px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.projectImg {
	width: 33%;
	float: left;
}
} /* END 480 Min and 767px Max Break point */

@media only screen and (min-width: 768px) {
.projectImg {
	width: 70%;
	margin: 0;
}
} /* END 768px Min Break point */

@media only screen and (min-width: 1079px) {
.projectImg {
	width: 75%;
}
} /* END 1079px Min Break point */



/* =Profile Page
----------------------------------------------- */
.profileSnippet p {
	font-size: 16px;
}
.profileSnippet ul {
	margin-bottom: 0 !important;
}
.profileSnippet ul li {
	margin: 0 0 5px 0;
}

.aboutBlock, .aboutDetails, .aboutInfo {
	float: left;
	clear: both;
	width: 100%;
	display: block;
}
.aboutPadd {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid #d4d5d8;
}
.aboutInfo {
	margin-top: 20px;
}
@media only screen and (min-width: 769px) {
.aboutDetails {
	clear: none;
	width: 30%;
	text-align: center;
}
.aboutInfo {
	clear: none;
	width: 60%;
	margin-left: 10%;
	margin-top: 0;
}
} /* END 769px Min Break point */

/* Header Info Bar */
.info-bar {
	border: 1px solid #d4d5d8;
	color: #229e4c;
	padding-bottom: 0;
	background: none;
}
#content .info-bar .info ul {
	margin: 15px 0 20px 0;
	list-style-type: none;
}
.info-bar .info ul li:before {
	color: #229e4c;
    	font-size: 26px;
    	height: 26px;
    	line-height: 18px;
    	margin-right: 15px;
    	margin-top: 2px;
    	width: 16px;
}
.info-bar .info ul li a {
	color: #229e4c;
}
.info-bar .info ul li a:hover {
	text-decoration: underline;
}

@media only screen and (min-width: 769px) {
.info-bar .info ul li {
    margin-right: 0;
}
} /* END 769px Min Break point */

@media only screen and (min-width: 1178px) {
.info-bar {
	font-size: 16px;
}
} /* END 1178px Min Break point */


/* =Footer
----------------------------------------------- */
@media only screen and (max-width: 768px) {
#site-generator .copyright, #site-generator .hosted {
	width: 100%;
	float: left;
	text-align: center;
}
#site-generator .hosted {
	padding-bottom: 5px;
}
} /* END 768px Max Break point */

@media only screen and (min-width: 769px) {
#site-generator .copyright {
	text-align: left;
	width: 65%;
}
#site-generator .hosted {
	text-align: right;
	width: 35%;
	float: right;
}
#site-generator .copyright, #site-generator .hosted {
	padding: 0;
}
} /* END 769px MIN Break point */

#site-generator {
	padding: 30px 0px;
	color: #e2e2e2;
	background-color: #229f4d;
}

#site-generator .copyright a, #site-generator .hosted a {
	color: #e2e2e2;
}
#site-generator .copyright a:hover, #site-generator .hosted a:hover {
	color: #8ae9b0;
}

/* Back To Top */
.back-to-top a:hover {
	background-color: #6fbb4b;
}
