/*
Theme Name: Titan 47 Theme
Theme URI: https://www.titan47.com;
Description: Pineapple
Author: Tiny Titan Studio
Author URI: https://www.titan47.com;
Version: 1.0
Tags: custom
*/

/* Reset */
* { margin: 0; padding: 0; }
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{padding:0;border:0;margin:0;vertical-align:baseline;box-sizing:border-box;}
body{}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

/* Set Initial Values */
body { background: #fff; font-size: 100%; font-family: 'Open Sans', Arial, sans-serif; color: #333; }
img { max-width: 100%; height: auto; border: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', Arial, sans-serif; color: #231f20; font-weight: 400; }
a { text-decoration: none; color: #5d50db; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
a:hover { color: #5d50db; }

/* Utility Classes */
.f { width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; } /* Full Width Wrapper */
.w { width: 93.75%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } /* Padded Width Wrapper */
.x { clear: both; } /* Clear Class */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
* html .group, *:first-child+html .group { zoom: 1; } /* IE6 / IE7 */

body { padding-top: 0px; }
body { background: url('images/brand.slash.png') right 100px top no-repeat; }
body.home { background: none; }

/* Header */
header.body#home {  }
header.body#default {  }
header.body#default {  }
header.body#default .w { padding: 45px 0; }
header.body#default .logo { display: inline-block; }
header.body#default .navigation { display: inline-block; }
header.body#default .navigation ul { list-style: none; margin: 0; padding: 0; }
header.body#default .navigation ul li { display: inline-block; margin: 0; padding: 0; margin-left: 40px; }
header.body#default .navigation ul li a { color: #222222; }

header.body.color#default .w { position: relative; z-index: 9999; }
header.body.color#default .navigation ul li a { color: #ffffff; }
.background.color { position: relative; width: 100%; background: linear-gradient(90deg,#5d50db 00%,#50dbc2 100%); }
.background.color .dots { position: absolute; background: url(images/brand.dots.png) right top 45px no-repeat; height: 160px; top: 0; right: 0; width: 100%; pointer-events: none; }
/* Footer */
footer.body { background: #231f20; clear: both; padding: 30px 0; }
footer.body .secondary { display: inline-block; width: 60%; text-align: right;  }
footer.body .secondary ul { list-style: none; }
footer.body .secondary ul li { display: inline-block; margin-left: 40px; color: #fff; }
footer.body .secondary ul li a { color: #fff; }
footer.body .secondary ul li a i.svg-inline--fa { display: inline-block; padding-right: 6px; }
footer.body .copyright { display: inline-block; width: 40%; vertical-align: middle; }
footer.body .copyright p { font-size: 13px; color: #fff; text-align: left; }

/* Default Styles */
section.body .w { padding: 0 32px; min-height: 200px; }
section.body .content { padding: 40px 0; zoom: 1; float: left; width: 70%; }
section.body .content .featured {  }
section.body .content .featured img { border-radius: 2px; margin-bottom: 20px; }
section.body .content h1 { font-size: 34px; margin-bottom: 12px; color: #333; }
section.body .content h2 { font-size: 26px; margin-bottom: 12px; }
section.body .content h3 { font-size: 22px; margin-bottom: 12px; color: #537f9c; }
section.body .content p { font-size: 16px; line-height: 26px; margin-bottom: 20px; }
section.body .content ul { font-size: 16px; margin-left: 25px; margin-bottom: 20px; }
section.body .content ul li { line-height: 26px; }
section.body .content .posted { font-size: 14px; color: #ababab; margin-bottom: 7px; line-height: 1; }
section.body .content .page-title { font-size: 20px; font-family: 'Open Sans', sans-serif;}

section.body.fullwidth .content { float: none; margin: 0 auto; }

section.body .sidebar { float: right; width: 25%; }
section.body .sidebar .widget { width: 100%; margin-bottom: 40px; }
section.body .sidebar .widget h3.title { font-size: 23px; padding-bottom: 14px; }
section.body .sidebar .widget ul { list-style: none; border-top: 1px solid #d0d0d0;}
section.body .sidebar .widget ul li { clear: both; zoom: 1; zoom: 1; padding: 9px 0; border-bottom: 1px solid #d0d0d0;}
section.body .sidebar .widget ul li:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
section.body .sidebar .widget ul li a { color: #585858; display: block; padding: 3px 3px 3px 3px; zoom: 1;}
section.body .sidebar .widget ul li a:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
section.body .sidebar .widget ul li .time { color: #585858; font-weight: 500; text-transform: uppercase; font-size: 18px; float: left; padding-left: 10px; text-align: center; width: 10%; }
section.body .sidebar .widget ul li .info { margin-left: 12px; float: right; width: 74%; line-height: 1; }
section.body .sidebar .widget ul li .info h4 { font-weight: 500; font-family: 'Open Sans', sans-serif; color: #585858; font-size: 18px; line-height: 1; padding: 1px 0 4px 0;}
section.body .sidebar .widget ul li .info p { color: #ababab; font-size: 12px; font-style: italic; line-height: 1; margin: 0; padding: 5px 0 0 0; }
section.body .sidebar .widget h5.more { font-weight: 400; text-align: right; margin-top: 5px; font-size: 14px; font-family: 'Open Sans', sans-serif; }
section.body .sidebar .widget h5.more a { color: #ababab; }
section.body .sidebar .widget h5.more a:hover { color: orange; }

section.body.blogroll .post { margin-bottom: 55px; }
section.body.blogroll .post .title a { color: #414141;} 
section.body.blogroll .post .title a:hover { color: #1c77a6;} 
section.body.blogroll .post .featured { float: left; width: 50%; margin: 0 15px 0px 0;}
section.body.blogroll .post .featured img { border-radius: 2px; margin-bottom: 0px; }
section.body.blogroll .post .excerpt { }
section.body.blogroll .post .excerpt p { margin: 0 0 10px 0; }
section.body.blogroll .post .share { text-align: right; padding-right: 16px; }
section.body.blogroll .post .share .stButton { margin-left: 0px;}

section.body .content .wpcf7-form p { margin-bottom: 12px; }
section.body .content .wpcf7-form input[type="text"],
section.body .content .wpcf7-form input[type="email"],
section.body .content .wpcf7-form input[type="tel"] { box-sizing: border-box; width: 100%; border-radius: 3px; border: 1px solid #e4e4e4; outline: none; padding: 6px 7px; font-size: 16px; }
section.body .content .wpcf7-form textarea { box-sizing: border-box; width: 100%; border-radius: 3px; border: 1px solid #e4e4e4; outline: none; padding: 6px 7px; font-size: 16px; }
section.body .content .wpcf7-form input[type="submit"] { -webkit-appearance: none; cursor: pointer; border: none; line-height: 22px; font-size: 16px; display: inline-block; padding: 8px 30px; background: #50dbc2; color: #ffffff; border-radius: 2px; box-shadow: rgba(0,0,0,.15) 0 2px 8px; }
section.body .content .wpcf7-form .wpcf7-radio .wpcf7-list-item { display: block; margin-left: 15px;}
section.body .content .wpcf7-form h4 { padding: 15px 0 5px; } 
section.body .content .wpcf7-form label.required:after { content: " "; display: inline-block; background: #f62d80; margin-left: 5px; position: relative; top: -5px; border-radius: 10px; width: 6px; height: 6px; }
section.body .content .wpcf7-response-output { margin: 10px 0; border: none; padding: 0; }
section.body .content .wpcf7-validation-errors { color: #ff0000; }
section.body .content .wpcf7-mail-sent-ok { color: #a1b851;}
section.body .content .wpcf7-not-valid-tip { position: absolute; top: -4px; left: 44%; z-index: 100; background: none transparent; border: none; font-size: 10pt; width: auto; padding: 0; color: #ff0000; }

.cols:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
.cols .col { float: left; box-sizing: border-box; }
.cols.two .col { width: 50%; }
.cols.three .col { width: 33%; }
.cols.four .col { width: 25%; }

.button { color: #231f20; display: inline-block; padding: 8px 30px; background: #fff; border-radius: 2px; box-shadow: rgba(0,0,0,.15) 0 2px 8px; }
.button.purple-bg { background: #5d50db url('images/button.purple-bg.jpg'); background-size: cover; color: #ffffff; }
.button.purple-tx { color: #5d50db; }
.button.green-bg { background: #50dbc2; color: #ffffff; }
.button.green-tx { color: #50dbc2; }
.button.yellow-bg { background: #f9cc44; color: #ffffff; }
.button.yellow-tx { color: #f9cc44; }
.button.pink-bg { background: #f42df6; color: #ffffff; }
.button.pink-tx { color: #f42df6; }
.button.gold-bg { background: #f9cc44 url('images/button.gold-bg.jpg'); background-size: cover; color: #231f20; }
.button.gold-tx { color: #f9cc44; }

/* Elements */
.element#services-reminder { border-top: 2px solid #f5f5f5; border-bottom: 2px solid #f5f5f5; background: #fff; padding: 60px 0; }
.element#services-reminder .cols.three .col { padding: 0 4%;  }
.element#services-reminder .cols.three .col h3 { font-weight: 400; font-size: 26px; padding-bottom: 14px; }
.element#services-reminder .cols.three .col p { margin-bottom: 10px; }
.element#services-reminder .cols.three .col a { color: #f9cc44; }

.element#values { border-bottom: 2px solid #f5f5f5; background: #fff url('images/element.services.gif') center center repeat-y; }
.element#values .cols.two { border-top: 2px solid #f5f5f5; padding: 60px 0; }
.element#values .cols.two .col { padding: 0 7%;  }
.element#values .cols.two .col h3 { font-weight: 400; font-size: 26px; padding-bottom: 14px; }
.element#values .cols.two .col p { margin-bottom: 10px; }
.element#values .cols.two .col.play h3 { color: #f9cc44; }
.element#values .cols.two .col.creativity h3 { color: #bb68d0; }
.element#values .cols.two .col.respect h3 { color: #50dbc2; }

.element#staff { -webkit-transform-origin: 0; transform-origin: 0; background: linear-gradient(90deg,#5d50db 00%,#50dbc2 100%); padding: 60px 0; }
.element#staff .cols.three { }
.element#staff .cols.four .col { padding: 0 4%; text-align: center; }
.element#staff .cols.four .col img.profile { box-shadow: rgba(0,0,0,.15) 0 2px 8px; border-radius: 100px; margin-bottom: 20px; }
.element#staff .cols.four .col h3 { color: #fff; margin-bottom: 0px; }
.element#staff .cols.four .col h4 { display: inline-block; color: #221f3b; padding: 0 10px 10px; border-bottom: 2px solid #ffffff; margin-bottom: 20px; }
.element#staff .cols.four .col p { color: #fff; margin-bottom: 20px; }
.element#staff .cols.four .col.pink h4 {border-color: #bb68d0; }
.element#staff .cols.four .col.green h4 {border-color: #50dbc2; }
.element#staff .cols.four .col.yellow h4 {border-color: #f9cc44; }
.element#staff .cols.four .col.black h4 {border-color: #231f20; }

.element#contact-reminder { background: #fff; padding: 30px 0 35px; text-align: center; }
.element#contact-reminder h4 { font-size: 30px; color: #333333; margin-bottom: 24px; }
.element#contact-reminder h4 span { font-weight: bold; }

/* Pages */
body.home .splash.titan { background: #000 url('images/homepage.hero.png') center top no-repeat;}
body.home .splash #hero { position: relative; }
body.home .splash #hero .w { padding: 75px 0; text-align: center; }
body.home .splash #hero .col { width: 50%; display: inline-block; vertical-align: middle; text-align: left; }
body.home .splash #hero .col.mark{ text-align: center; width: 30%; }
body.home .splash #hero h1 { color: #fff; padding-bottom: 10px; font-size: 55px; font-weight: 400; }
body.home .splash #hero h1 b { font-weight: 800; }
body.home .splash #hero h2 { padding-bottom: 0; line-height: 0; }
body.home .splash #hero p { color: #fff; font-size: 18px; line-height: 26px; padding-bottom: 20px; }
body.home .splash #hero p .button { margin-right: 15px; }
body.home #about { padding-bottom: 40px; }
body.home #about .w { width: 80%; }
body.home #about .col.about { text-align: center; width: 75%; padding: 50px 0 50px 0; margin: 0 auto; }
body.home #about .col.about h3 {  font-size: 40px; font-weight: 800; padding: 0 10px 10px; margin-bottom: 0; display: inline-block; }
body.home #about .col.about hr { border: none; border-bottom: 2px solid #f9cc44; margin: 20px auto;  max-width: 100px; }
body.home #about .col.about p { padding-bottom: 10px; width: 75%; margin: 0 auto;}
body.home #about .col.about p a { color: #50dbc2; }

body.page-template-services .background.color { background: url('images/background.services.jpg') center center no-repeat; background-size: cover; }
body.page-template-services .splash #hero {padding-top: 0; position: relative; padding-bottom: 35px; }
body.page-template-services .splash #hero .col {width: 50%; }
body.page-template-services .splash #hero h1 { color: #fff; font-weight: 300; font-size: 34px; line-height: 40px; padding-bottom: 30px; }
body.page-template-services .splash #hero h2 { color: #fff; font-weight: 300; font-size: 34px; line-height: 40px; padding-bottom: 30px; }
body.page-template-services .splash #hero p {color: #fff; font-size: 18px; line-height: 26px; padding-bottom: 35px; }
body.page-template-services .splash #hero p .button { margin-right: 15px; margin-bottom: 15px; }
body.page-template-services .service { padding: 60px 0; border-bottom: 2px solid #f5f5f5;}
body.page-template-services .service .text { text-align: center; width: 50%; margin: 0 auto; }
body.page-template-services .service .text h2 { font-size: 30px; font-weight: bold; }
body.page-template-services .service .text h3 { color: #221f3b; margin-bottom: 14px; border-bottom: 2px solid #f9cc44; padding: 0 10px 8px; display: inline-block; }
body.page-template-services .service .text .brands { color: #e4e4e4; font-size: 40px; }
body.page-template-services .service .text p { margin-bottom: 20px; line-height: 26px; }
body.page-template-services .service .cols.three { padding-top: 60px; }
body.page-template-services .service .cols.three .col { text-align: center; padding: 0 4%; }
body.page-template-services .service .cols.three .col ul { list-style: none; }
body.page-template-services .service .cols.three .col ul li { margin-bottom: 7px; }
body.page-template-services .service .cols.three .col h4 { font-size: 18px; margin-bottom: 10px; }
body.page-template-services .service#development .cols.three .col h4 { color: #f9cc44; }
body.page-template-services .service#design .text h3 { border-bottom: 2px solid #bb68d0; }
body.page-template-services .service#design .cols.three .col h4 { color: #bb68d0; }
body.page-template-services .service#marketing .text h3 { border-bottom: 2px solid #50dbc2; }
body.page-template-services .service#marketing .cols.three .col h4 { color: #50dbc2; }

/* Wordpress Utility Classes */
.sticky{}
.edit-link { text-align: right; font-size: 12px; }
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{ float: right !important; margin: 5px 0 5px 10px; }
.alignleft{ float: left !important; margin: 5px 10px 5px 0; }
.aligncenter{ text-align: center !important; }
.logout a:hover { color: #C43316 !important; }
.important { color: #cc0000 !important; }