/*
Theme Name: WorkSpace
Author: Infenix Webs
Author URI: http://www.infenixwebs.com
*/

/*----- global styles  -----*/
body, html {margin:0;padding:0;width:100%;height:100%;font-family: 'Istok Web', 'sans-serif';font-size:16px;color:#333;text-align:center;}
img {border:0;outline:none;}
h1,h2,h3,h4,h5,h6,p,ul {margin:0;}
p {font-size:16px;} 
a {text-decoration:none;}
ul {padding:0;list-style-type:none;}
fieldset, input, textarea {margin:0;padding:0;outline:none;border:none;background:none;}
header,main,section,nav,article,aside,contact {display:block;}

/*----- styles for global containers  -----*/
.wrapper-div {position:relative;margin:0;width:100%;height:auto;text-align:center;float:left;background:#FFF;}
.wrapper {position:relative;margin:0 auto;max-width:1170px;height:auto;text-align:center;}

/*----- styles for header elements  -----*/
.headerBg {height:100%;background:url(images/workspaceBanner.jpg) fixed;background-size:cover;background-position:100% center;}
.headerbar img {margin:20px 0 0 0;float:left;}
.headerbar ul {margin:32px 0 0 0;width:100%;float:left;}
.headerbar ul li {display:inline-block;margin:0 5px 0 5px;}
.headerbar ul li a {padding:10px 20px 10px 20px;font-weight:400;color:#FFF;text-transform:uppercase;}
.headerbar ul li a:hover {background:#ff8200;}
.headerText {position:absolute;top:50%;left:0;width:100%;text-align:center;}
.headerText img {height:50px;}
.headerText p {margin:0 0 10px 0;font-weight:300;font-size:20px;color:#FFF;}
.headerText a {padding:10px 20px 10px 20px;font-weight:300;font-size:16px;color:#FFF;border:1px solid #009ee7;text-transform:uppercase;background:#009ee7;}
.barsBg {position:absolute;bottom:0;left:0;width:100%;height:70px;float:left;background:url(images/bg-decibles.png) repeat-x bottom left}

/*----- styles for navigation bar  -----*/
.navigation {position:relative;width:100%;height:70px;text-align:center;float:left;border-bottom:1px solid #f2f2f2;background:#FFF;z-index:2;}
.static {display:none;position:fixed;top:0;left:0;}
.navigation img {margin:20px 0 0 10px;height:32px;float:left;cursor:pointer;}
.navigation i {display:none;margin:17px 10px 0 0;width:35px;height:35px;font-size:25px;color:#FFF;text-align:center;line-height:35px;vertical-align:middle;cursor:pointer;background:#000;float:right;}
.navigation ul {margin:0;float:right;}
.navigation ul li {display:inline-block;margin:0;float:left;}
.navigation ul li a {display:block;padding:0 20px 0 20px;height:70px;font-weight:400;color:#333;text-transform:uppercase;line-height:75px;vertical-align:middle;}
.navigation ul li a.selected, .navigation ul li a:hover {color:#FFF;background:#ff8200;}
.navigation ul li.current_page_item a {color:#FFF;background:#ff8200;}

/*----- styles for intro elements  -----*/
.challenge {padding:75px 0 0 0;}
.challenge h2 {font-size:32px;font-weight:800;color:#333;text-transform:uppercase;}
.challenge p {margin:10px 15% 10px 15%;font-size:16px;color:#333;line-height:26px;float:left;}
.challenge ul {margin:20px 0 75px 0;width:100%;float:left;}
.challenge ul li {display:inline-block;margin:0 1% 0 1%;width:31.33%;color:#333;text-align:center;float:left;background:#f2f2f2;}
.challenge ul li i {width:99.5%;height:100px;font-size:40px;color:#ff8200;line-height:100px;vertical-align:middle;background:#FFF;border:1px solid #f2f2f2;}
.challenge ul li span {display:block;margin:30px 5% 30px 5%;width:90%;color:#333;float:left;}
.heard {height:450px;background:url(images/workspaceBanner2.jpg) fixed;background-size:cover;background-position:100% top;}
.heard .wrapper {position:absolute;top:50%;left:0;max-width:100%;width:100%;text-align:center;float:left;}
.heard h3 {margin:0;width:100%;font-size:28px;font-weight:800;color:#FFF;text-transform:uppercase;text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);}
.heard p {margin:10px 0 0 0;width:100%;font-size:24px;color:#FFF;line-height:26px;text-align:center;float:left;text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);}
.workspace {padding:75px 0 75px 0;background:#009ee7;}
.workspace h4 {font-size:32px;font-weight:800;color:#FFF;text-transform:uppercase;}
.workspace p {margin:10px 5% 10px 5%;color:#FFF;line-height:26px;float:left;}
.lwrapper {margin:50px 0 0 7%;text-align:left;width:50%;float:left;}
.lwrapper h4 {font-size:20px;}
.lwrapper p {margin:10px 0 10px 0;}
.lwrapper ul {margin:10px 0 10px 0;width:100%;float:left;}
.lwrapper ul li {display:inline-block;margin:4px 0 4px 0;width:100%;font-size:16px;color:#FFF;line-height:26px;float:left;}
.lwrapper ul li i {margin:0 8px 0 0;font-size:20px;}
.lwrapper ul li ul {margin:10px 0 10px 10%;width:90%;float:left;}
.rwrapper {position:relative;margin:50px 7% 0 0;text-align:right;width:30%;min-height:380px;float:right;}
.rwrapper img {position:absolute;top:0;right:0;z-index:1;}

/*----- styles for intro elements  -----*/
.contact {padding:75px 0 75px 0;background:#414952;}
.contact h5 {font-size:32px;font-weight:800;color:#FFF;text-transform:uppercase;}
.contact p {padding:20px 15% 20px 15%;width:70%;color:#FFF;line-height:26px;float:left;border-bottom:1px solid #61686f;}
.contact p.msg {padding:20px 10% 20px 10%;width:80%;text-align:center;}
.contact ul {padding:20px 0 20px 0;width:100%;float:left;border-bottom:1px solid #61686f;}
.contact ul li {display:inline-block;margin:0;width:50%;font-size:16px;font-weight:800;color:#FFF;text-align:center;float:left;}
.contact ul li a {color:#FFF;}
.contact ul li i {margin:0 5px 0 0;font-size:20px;color:#ff8200;}
.contact p.msg {display:none;font-size:20px;font-weight:800;}
.contact form {margin:40px 0 0 0;width:100%;float:left;}
.contact form fieldset {margin:0;width:50%;float:left;}
.contact form fieldset textarea {margin:0;padding:10px 2% 0 2%;width:91%;height:175px;font-size:14px;color:#999;float:right;background:#FFF;}
.contact form fieldset input[type="text"] {margin:0 2% 25px 0;padding:0 2% 0 2%;width:94%;height:45px;font-size:14px;color:#999;float:left;background:#FFF;}
.contact form fieldset input[type="button"] {padding:0;width:25%;height:45px;font-size:14px;color:#FFF;text-transform:uppercase;cursor:pointer;background:#ff8200;float:right;}
.contact form fieldset.last {margin:0;width:100%;float:left;}
.copy {padding:20px 0 20px 0;background:#313943;}
.copy span {color:#FFF;}

/*----- styles for inner pages styles  -----*/
.banner {height:200px;}
.banner .wrapper img {display:none;}
.content h1 {font-size:32px;font-weight:800;color:#333;text-transform:uppercase;}
.content p {margin:10px 0 10px 0;width:100%;color:#333;line-height:26px;float:left;}
.content b {margin:10px 0 10px 0;width:100%;color:#333;line-height:26px;float:left;}
.content ul {margin:10px 0 10px 0;width:100%;float:left;}
.content ul li {display:inline-block;margin:5px 0 5px 0;width:100%;color:#333;line-height:26px;float:left;}
.content ul li i {margin:0 10px 0 0;font-size:14px;color:#ff8200;}
.lcolumn {margin:50px 0 50px 0;width:70%;text-align:left;float:left;}
.rcolumn {margin:50px 0 50px 0;width:25%;text-align:left;float:right;}

@media only screen and (min-width : 240px) and (max-width : 1070px) {
.headerbar img {margin:20px 0 0 0;float:none;}
.lwrapper {margin:50px 0 0 1%;width:54%;}
.rwrapper {margin:50px 1% 0 0;width:44%;}
.contact p {margin:0 1% 0 1%;width:68%;}
.contact p.msg {padding:20px 10% 20px 10%;width:78%;text-align:center;}
.contact form {margin:40px 1% 0 1%;width:98%;float:left;}
.lcolumn {margin:50px 1% 50px 1%;width:68%;text-align:left;float:left;}
.rcolumn {margin:50px 1% 50px 1%;width:23%;text-align:left;float:right;}
}
@media only screen and (min-width : 240px) and (max-width : 1023px) {
.headerbar ul {display:none;}
.navigation i {display:block;}
.navigation ul {display:none;margin:0;width:100%;float:left;background:#FFF;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;}
.navigation ul li {display:inline-block;margin:0;width:100%;float:left;}
.navigation ul li a {height:35px;line-height:35px;text-align:left;}
}
@media only screen and (min-width : 240px) and (max-width : 930px) {
.lwrapper {margin:50px 1% 0 1%;width:98%;}
.rwrapper {display:none;}
.contact p {padding:20px 5% 20px 5%;width:88%;}
}
@media only screen and (min-width : 240px) and (max-width : 825px) {
.lcolumn {margin:50px 1% 10px 1%;width:98%;text-align:left;float:left;}
.rcolumn {margin:20px 1% 50px 1%;width:98%;text-align:left;float:left;}
}
@media only screen and (min-width : 240px) and (max-width : 700px) {
.challenge ul li {margin:0 5% 0 5%;width:90%;}
}
@media only screen and (min-width : 240px) and (max-width : 700px) {
.rwrapper {display:block;margin:50px 1% 0 1%;width:98%;text-align:center;}
.rwrapper img {position:relative;top:auto;right:auto;max-width:90%;z-index:1;}
.contact {margin-top:-120px;}
}
@media only screen and (min-width : 240px) and (max-width : 550px) {
.headerText img {width:90%;height:auto;}	
.contact form fieldset {margin:0;width:100%;float:left;}
.contact form fieldset input[type="text"] {margin:0 0 25px 0;width:96%}
.contact form fieldset input[type="button"] {margin:25px 0 0 0;width:100%;float:left;}
.contact form fieldset textarea {width:96%;}
.navigation img {max-width:75%;height:auto;vertical-align:middle;}
.contact ul li {width:100%;}
.contact ul li:first-child {margin:0 0 10px 0;}
}
@media only screen and (min-width : 240px) and (max-width : 400px) {
.headerbar img {max-width:80%;}
.challenge p {margin:10px 10px 10px 10px;}
.challenge ul li {margin:0 10px 20px 10px;width:auto;}
.challenge ul li:last-chld {margin:0 10px 0 10px;}
.contact p.last span {margin:0;width:100%;text-align:center;float:left;}
.contact p.last span:last-child {margin:10px 0 0 0;}
.contact p.last span i.fa-phone {margin:0 5px 0 0;}
}

/* >>> WSR blog post styling (added by assistant) >>> */
.content-area{ max-width:760px; margin:0 auto; padding:0 24px 80px; box-sizing:border-box; font-family:"Istok Web",sans-serif; text-align:left; }
.content-area *{ box-sizing:border-box; }
.post-thumbnail{ width:100vw; position:relative; left:50%; transform:translateX(-50%); margin:0 0 48px; line-height:0; }
.post-thumbnail img{ width:100%; height:auto; display:block; }
.entry-header{ text-align:left; margin:0 0 24px; }
.entry-title{ font-family:"Istok Web",sans-serif; font-weight:700; font-size:2.5rem; line-height:1.18; color:#1A2836; text-align:left; margin:0 0 10px; }
.entry-meta, .entry-header .posted-on, .entry-header .byline, .entry-header a{ color:#61686F; font-size:.92rem; }
.entry-content{ text-align:left; max-width:none; font-family:"Istok Web",sans-serif; font-size:1.15rem; line-height:1.75; color:#333; }
.entry-content p{ margin:0 0 1.45em; text-align:left; }
.entry-content h2{ font-family:"Istok Web",sans-serif; font-weight:700; font-size:1.7rem; line-height:1.3; color:#1A2836; text-align:left; margin:2.1em 0 .55em; }
.entry-content h2::after{ content:""; display:block; width:56px; height:4px; background:#FF8200; border-radius:2px; margin-top:.55rem; }
.entry-content a{ color:#009EE7; }
.entry-content strong{ color:#1A2836; }
.entry-content > p:first-of-type{ font-style:italic; font-size:1.3rem; line-height:1.55; color:#414952; border-left:4px solid #FF8200; padding-left:20px; margin:0 0 1.7em; }
.entry-content > p:last-child{ margin-top:2em; }
.entry-content > p:last-child a{ display:inline-block; background:#009EE7; color:#fff; text-decoration:none; font-weight:700; padding:15px 30px; border-radius:9px; }
.comments-area, #comments{ max-width:760px; margin:40px auto 0; padding:0 24px 64px; text-align:left; font-family:"Istok Web",sans-serif; color:#333; }
.comments-area input[type=text], .comments-area input[type=email], .comments-area textarea{ border:1px solid #d5dbe1; border-radius:8px; padding:10px 12px; max-width:100%; }
/* <<< end WSR blog post styling <<< */

/* >>> WSR blog nav-band correction (assistant) >>> */
.content-area{ position:relative; padding-top:84px; }
.content-area::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:84px; background:#0B131D; z-index:-1; }
/* <<< end nav-band correction <<< */