/*
Theme Name:     Flatco Child
Theme URI:      http://www.themewaves.com
Description:    Child theme for the Flatco
Author:         ThemeWaves
Author URI:     http://www.themewaves.com
Template:       flatco                             
Version:        1.0
*/

@import url("../flatco/style.css");



@font-face {
    font-family: 'dinregular';
    src: url('fonts/din-webfont.eot');
    src: url('fonts/din-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/din-webfont.woff') format('woff'),
         url('fonts/din-webfont.ttf') format('truetype'),
         url('fonts/din-webfont.svg#dinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'dinbold';
    src: url('fonts/din_bold-webfont.eot');
    src: url('fonts/din_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/din_bold-webfont.woff') format('woff'),
         url('fonts/din_bold-webfont.ttf') format('truetype'),
         url('fonts/din_bold-webfont.svg#dinbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'din_lightregular';
    src: url('fonts/din_light-webfont.eot');
    src: url('fonts/din_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/din_light-webfont.woff') format('woff'),
         url('fonts/din_light-webfont.ttf') format('truetype'),
         url('fonts/din_light-webfont.svg#din_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'din_mediumregular';
    src: url('fonts/din_medium-webfont.eot');
    src: url('fonts/din_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/din_medium-webfont.woff') format('woff'),
         url('fonts/din_medium-webfont.ttf') format('truetype'),
         url('fonts/din_medium-webfont.svg#din_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Enter below your Customization CSS */
body, h1, h2, h3, h4, h5 {font-family: din_lightregular, dinregular, Arial, Helvetica, sans-serif !important;}
dt {position: relative;}
/* STRUCTURE */
#main [class*="span"] { margin-top: 15px; margin-bottom: 15px; }
.span12.divider{margin-top:0px !important; margin-bottom: 0px !important;}
.tw-divider {border-top: none; border-bottom: 0px ; margin: 0px; height: 31px; width: 100%; background: url('images/divider.jpg') right top repeat-x;}


/* HEADER */
#header .container { border-bottom: 1px solid #acacad; margin-bottom: 10px;}

/* HEADER: Search & Socials */
.tw-top-bar {border-bottom: none !important;}
.header-follow-us {background-color: #787a7c; color: #ddd; font-size: 10px; height: 20px;width: 180px; float: right; }
.header-follow-us .follow-label {margin-left: 5px; float: left; line-height: 20px; height: 20px; }
.header-follow-us ul li, .header-follow-us ul {float: right;}
.tw-social-icon a, .tw-social-icon a span{line-height: 20px;}
.tw-social-icon a {width: 20px; height: 20px;}
.tw-social-icon {margin-bottom: 0px;}
 
 .search-bar {background-color: #787a7c; color: #ddd; font-size: 10px; height: 20px; width: 180px; float: right;}
 .search-bar form {margin-bottom: 0px;}
 .tw-top-bar-info {line-height: 20px;}
 .search-bar form#searchform input {padding: 0px 10px; height: 20px; line-height: 20px; color: white; background-color: #787a7c; border: none; font-family: dinregular;}
 .search-bar form#searchform input:-moz-placeholder,textarea:-moz-placeholder{color:#dddddd; font-size: 10px;}
.search-bar form#searchform input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#dddddd; font-size: 10px;}
.search-bar form#searchform input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#dddddd; font-size: 10px;}
 .search-bar form#searchform .icon-search {top: 4px !important; right:15px !important;font-size: 11px !important; left: auto;}
.search-bar form#searchform .fa-search {top: 2px; font-size: 14px;}
/* HEADER: Logo */
#header .tw-logo { line-height: 92px;}


/* HEADER: Top Menu */
.tw-menu-container {float:left;}
.sf-menu > li {margin-right: 20px; }
.sf-menu > li > a {text-transform: capitalize !important; padding: 46px 4px 22px 4px !important; font-family: dinregular !important;}
ul.sf-menu > li.current_page_item > a{ /* border-bottom: 4px solid #02a4ba; color: #02a4ba; */}
ul.sf-menu > li.hilight-menu > a{ /* border-bottom: 4px solid #02a4ba; color: #02a4ba; */}
ul.sf-menu > li.current_page_item.current-menu-item > a, ul.sf-menu > li.current-page-ancestor a{  border-bottom: 4px solid #02a4ba !important; color: #02a4ba; }
ul.sf-menu > li.current-page-ancestor ul li a {border-bottom: 1px dotted #ccc !important; font-size: 16px !important; font-weight: normal;}
ul.sf-menu > li ul li a { font-size: 16px !important; font-weight: normal; text-transform: capitalize !important; font-family: dinregular !important; border-bottom: 1px dotted #ccc !important; }

.span8.menu-holder { float: left; position: relative; left:70px; top: 1px;}

/* HEADER: Top Menu: Stuck */
#header.stuck {background-color: rgba(255,255,255, 1); height: 68px !important; }
#header.stuck .container {/* border-bottom: none; */}
#header.stuck ul.sf-menu > li > a { padding: 16px 4px !important; }
#header.stuck .tw-logo img {height: 48px !important;}
ul.sf-menu > li > a {margin: 0 10px !important;}
.sf-menu ul {left: 10px !important;}
/* HOMEPAGE: Slider */
.ls-lightskin .ls-nav-pre {left: 0px !important;}
.ls-lightskin .ls-nav-next { right: 0px !important; }
/* HOMEPAGE: Dropcaps */
.homepage_dropcaps {font-family: dinregular; margin-bottom: 51px; margin-top: 8px;}
.homepage_dropcap {height: 53px; width: 53px; border-radius: 35px; line-height: 60px; color: white; text-align: center; font-size: 32px; font-weight: normal;  float: left;}
.homepage_dropcap_wrap {width: 200px; float: left; margin-left: 20px;}
.homepage_dropcap_title {font-size: 15px; line-height: 18px;}
.homepage_dropcap_text {color: #58595b; font-size: 15px;  line-height: 18px;}
    
/* HOMEPAGE: Welcome */
.homepage-welcome, .homepage-experts, .homepage-we-are {color: #58595b; line-height: 22px; font-size: 15px; text-align: justify; /* padding-right:  40px; */}
.homepage-welcome h2, .homepage-experts h2, .homepage-we-are h2, .homepage-contact-title h2 {color: #02a4ba; text-align: left; text-transform: uppercase; font-weight: normal; font-size: 28px; line-height: 38px; font-family: din_lightregular;}
.homepage-experts h2 {margin-bottom:30px;}
.homepage-experts h3 {font-family: din_mediumregular!important; font-size: 20px !important; margin-bottom: 20px; font-weight: normal;}
/* HOMEPAGE: Experts */
/*
.homepage-experts {position: relative; left: 40px;}
.homepage-blue-clips {position: relative; left: -40px; width: 340px !important;}
*/
.homepage-blue-clips img {margin: 0px !important;}
.asset {color: #58595B;font-size: 15px;line-height: 22px;}

/* HOMEPAGE: Members */
@media (max-width: 1100px) { 
.homepage-team {margin-top: 35px !important; margin-left: 60px !important;}
.team-member {margin-bottom: 25px !important; margin-left: 16px;}
}

@media (min-width: 1150px) { 
.homepage-team {margin-top: 35px !important; margin-left: 80px !important;}
.team-member {margin-bottom: 25px !important; margin-left: 12px;}
}
.member-image {text-align: center; margin-bottom: 15px;}

.member-title {padding: 0px !important; background-color: transparent !important; }
.member-title h2 {font-family: dinbold; font-weight: bold !important; color: #02a4ba; text-transform: capitalize; font-size: 15px; line-height: 22px;}
.member-title span, .team-content {color: #58595b; font-family: din_lightregular; font-size: 15px; font-weight: normal; line-height: 22px; text-transform: none; }
.team-content {margin: 2px 0px; text-align: center;}

/* HOMEPAGE: Contact */
#contact {padding: 30px 0 70px 0;}
.contact-text, .contact-text a {color: #58595b; font-family: din_lightregular; font-size: 15px;}
input[type="text"], input[type="password"], input[type="email"], textarea, select {width: 100%; font-family: din_lightregular}
input[type="text"] {max-height:20px}
input.iphorm_1_5 {max-width: 569px !important;}
/*
input[type="text"] {max-width: 255px !important; max-height:20px}
input.iphorm_1_5 {max-width: 540px !important;}
textarea {max-width: 540px !important;}
*/
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap.last-child .iphorm-element-spacer, .iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row.iphorm-group-row-1cols > .iphorm-element-wrap .iphorm-element-spacer, .iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap.last-child .iphorm-element-spacer, .iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row.iphorm-group-row-1cols > .iphorm-element-wrap .iphorm-element-spacer { padding-bottom: 3px !important; }
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap .iphorm-element-spacer {padding-bottom: 3px !important; }
.iphorm-element-spacer {padding-bottom: 3px !important;}
.iphorm-submit-wrap {margin: 0px !important;}
.homepage-contact-title {margin-top: 30px;  }

/* DIVIDERS */
/* #home .tw-divider { margin-top: 100px !important; } */
#page #about {margin-top: 100px;}
#bottom {padding-bottom: 500px; padding-top: 5px;}
#bottom .copyright {font-size: 9px; font-family: dinregular; color:#58595b}




/* WORK Page */

.span12.work-callout { background-color: #ffffff; color: #02a4ba; padding: 25px 0%; }
.span12.work-callout h1 {text-transform: uppercase; font-size: 30px; color: #02a4ba; line-height: 50px; width: 30%; float: left; font-weight: normal;}    
.span12.work-callout p {width: 70%; float: right; font-size: 19px; line-height: 28px; text-align: justify;}
.gallery .gallery-item img {margin: 0px; width: 100%; max-width: 100%;}

.gallery .gallery-item {border: none; margin-right: 40px; margin-bottom: 40px;}
.tw-element.span12  .gallery dl.gallery-item:nth-of-type(4n) {margin-right: 0px;}

.gallery-icon .new-image-overlay{ position: absolute; z-index: 5; top: 0; overflow: hidden; width: 100%; height: 100%; }
.gallery-icon .new-image-overlay a{ width: 262px; height: 262px; top:0; padding: 0;  z-index: 5; background: transparent url('images/image-overlay.png') top center no-repeat; text-indent: -9999px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 450ms ease-out 0s;
-moz-transition: all 450ms ease-out 0s;
-o-transition: all 450ms ease-out 0s;
transition: all 450ms ease-out 0s;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);}
.gallery-icon:hover .new-image-overlay a {opacity: 1;     filter: alpha(opacity=100);     -webkit-transform: rotateY(0deg);     -moz-transform: rotateY(0deg);     -ms-transform: rotateY(0deg);   transform: rotateY(0deg);}
.gallery-icon .new-image-overlay .image-links {line-height: 0em;}


/* Technology Page */
.technology-content h1 { font-size:31px; color: #d2232a !important; line-height:38px; border-bottom: 3px #00a5bc solid;  padding: 20px 0 40px 0;    margin-bottom: 20px;}
.technology-content h1 span {color: #d2232a !important;}

.technology-content-capabilites {color: #58595b; font-size: 20px;  font-family: 'din_mediumregular';}
.technology-content-capabilites h1 { font-family: 'din_mediumregular';  font-size: 31px; color: #58595b; }
.technology-content-quality,
.technology-content-quality h1 {margin-bottom: 0; line-height: 1em;}
.tech-iso {margin-top: 0;}
.tech-iso p { font-family: 'din_lightregular'; color: #58595b;
    line-height: 22px;
    font-size: 15px;
     border-bottom: 1px solid #58585a; width: 100%; padding-bottom: 20px; min-height: 115px; margin-bottom: 0; padding-bottom: 10px;}




/* RESPONSIVE ADJUSTMENTS */

@media (min-width: 980px) and (max-width: 1200px){
    ul.sf-menu > li > a {margin: 0 0px !important;}
}
@media (max-width: 767px) {
    .tw-top-bar .container .row .span6 {display: none;}
    .span3.header-follow-us {width: 49%; float: right;}
    .search-bar {width: 49%; float: left;}
}

@media (max-width: 499px) {
    .homepage_dropcaps {width: 33% !important; float: left !important; margin-bottom: 0px !important;}
    .homepage_dropcap { height: 35px; width: 35px; border-radius: 35px; line-height: 40px; }
    .homepage_dropcap_wrap {width: 100px !important;}
    .homepage-blue-clips, .asset {width: 30% !important; vertical-align: top !important;}
    .homepage-experts, .homepage-we-are {width: 68% !important;}
    .homepage-team {margin-left: 0px !important;}
    .team-member.span3 {width: 48% !important; float: left !important;margin-left: 2% !important; }
    .member-title span {font-size: 12px;}
    .contact-text {float: none; width: 100% !important;}
    
}


@media (min-width: 500px) and (max-width: 767px) {
    .homepage_dropcaps {width: 33% !important; float: left !important; margin-bottom: 0px !important;}
    .homepage_dropcap_wrap {width: 150px !important;}    
    .homepage-blue-clips, .asset {width: 50% !important; vertical-align: top !important;}
    .homepage-experts, .homepage-we-are {width: 49% !important;}
    .homepage-team {margin-left: 0px !important;}
    .team-member.span3 { width: 22% !important; float: left !important; }
    .contact-text {float: left; width: 50% !important;}
}

