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