/* ========== Reset ========== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0;  font-size: 100%;  vertical-align: baseline;   background: transparent;}

body {line-height: 1;  position: relative;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display: block;}
nav ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0;  font-size: 100%;   vertical-align: baseline; background: transparent; text-decoration:none; color:#343434; -moz-transition: all 0.8s ease 0s;  -o-transition: all 0.8s ease 0s;  transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s; text-decoration:none;}
/* change colours to suit your needs */
ins {background-color: #ff9; color: #000;  text-decoration: none;}
/* change colours to suit your needs */
mark {background-color: #353736; color: #fff;  font-style: italic; font-weight: bold;}
del {text-decoration:  line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted;   cursor: help;}
table {border-collapse: collapse;  border-spacing: 0;}
/* change border colour to suit your needs */
hr {display: block; height: 1px;  border: 0;  border-top: 1px solid #343434;  margin: 1em 0;  padding: 0;}
input, select { vertical-align: middle; outline: none;}

textarea{resize:none;}
a{cursor:pointer;}
a:focus, a:hover{outline:none !important;}

::-webkit-input-placeholder {color: #001427; opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight:300;}
::-moz-placeholder {color: #001427; opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight:300;}
:-ms-input-placeholder {color: #001427; opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight:300;}
:-moz-placeholder {color: #001427; opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight:300;}
::placeholder { color: #001427;  opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight:300;}
:-ms-input-placeholder {color: #001427;}
::-ms-input-placeholder {color: #001427;}
input:placeholder-shown {color: #001427; opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight:300;}

.txtArea{width:100%; border:0; border-bottom: 1px solid #000000; padding-left:4px;}
textarea::-webkit-input-placeholder {color: #001427;opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight: 500;}
textarea:-moz-placeholder {color: #001427;opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight: 500;}
textarea::-moz-placeholder {color: #001427;opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight: 500;}
textarea:-ms-input-placeholder {color: #001427; opacity:1;  font-family:Arial, Helvetica, sans-serif; font-weight: 500;}

/* ========== Input type number ========== */

/* Remove controls from Firefox */
input[type=number] { -moz-appearance: textfield;}
/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; /* Removes leftover margin */}

label:focus{outline:none;}
select::-ms-expand {display: none;}
select{appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none;}
select option{background:#231f20; padding:2px 3px;}

/* ========== Common ========== */
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;/* appearance:none; -moz-appearance:none; -webkit-appearance:none;*/}
html,body {height: 100% !important; margin: 0; padding: 0; position: relative;}
body{ font-family:Arial, Helvetica, sans-serif; font-weight:300; color:#414141; font-size:14px; line-height:20px; background:#7e7e7b; position:relative;}
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:600; line-height:150%;}
h2, h3, h4, h5, h6{  font-family:Arial, Helvetica, sans-serif; font-weight:600; line-height:150%;}
p{ margin-bottom:20px;}
ul li, ol li {list-style: none;}
img {max-width: 100%; border: none; display:block;}
.hidden{ opacity:0;}
.visible{opacity:1;}
.clear{clear:both;}
.spacer{clear:both; display:block; line-height:0; font-size:0;}
.clearfix:after {visibility: hidden;  display: block;   font-size: 0;   content: " ";  clear: both;  height: 0; }
/*.clearfix { display: inline-block; }*/
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
a:hover, a:focus{outline:none; text-decoration:none !important;}
a { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.text-right { text-align: right; }
.text-center{text-align:center;}
.text-left { text-align: left; }

.wrapper{position:relative;}
.container{width: 1200px; margin:20px auto 0; padding-bottom: 30px; border: 1px solid #7BBC32;}
.cont{width: 1200px; margin:10px auto}
header{margin-top:61px; padding: 0 32px;}
.logo{width: 350px; height: 26px; float:left}
.navigation{float:right; margin-top: 10px;width: 550px;height: 30px;padding-top: 1px;
    padding-left: 13px;}
.navigation ul { vertical-align: bottom; }
.navigation ul li{float:left; margin-left:40px;}
.navigation ul li:first-child{margin-left:0;}
.navigation ul li a{ padding-top: 7px;
    /*padding-right: 30px;*/
    padding-bottom: 7px;text-align: left; color: #ffffff; font-size: 17px; line-height: 20px; font-weight:bold; position:relative;font-family: Helvetica, Arial, "Arial Bold", "Arial Bold Italic", "Arial Italic";}
.navigation ul li a::after{position:absolute; top:7; right:-10px; content:"/";}
.navigation ul li:last-child a::after{display:none;}
.navigation ul li:hover a{color: #8cc541;}
.navigation ul li:last-child:hover a{color: #A6A7A4;}
.menu_digital{color: #FF8300;}

.ListingBody{margin-top:25px; padding: 0 33px 0 33px;}
.ListingBody ul li{float:left; width:200px; height:200px; cursor:pointer; margin-left:33px; margin-top:33px;}
.ListingBody ul li:nth-child(5n+1){margin-left:0;}
.ListingBody ul li .listingBox{position:relative; width:auto; height:auto;}
.ListingBody ul li .listingBox .imgHolder{width:100%;position:relative;transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.ListingBody ul li .listingBox .imgHolder img{width:100%; display:block; -webkit-transition: all 400ms linear; -moz-transition:all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear;}

.ListingBody ul li .listingBox .textBox{position:absolute; left:10px; bottom:10px; z-index: 3;}
.ListingBody ul li .listingBox .textBox h3{color:#ffffff; font-size: 32px; font-weight: bold; line-height: 115%;}
.ListingBody ul li .listingBox .textBox h3 span{display:block; color: rgb(178, 213, 58);}

.ListingBody ul li .listingBox:hover .textBox{display:block;}
.mask-img {position:absolute;top:0; left:0; background:rgba(0,0,0,0.5); width:100%; height:100%; z-index:2; -webkit-transition: background-color 400ms linear; -moz-transition: background-color 400ms linear;-o-transition: background-color 400ms linear; transition: background-color 400ms linear;}

.twitter{width: 30px; height: 20px; float:right; /*margin-left:30px; */ margin-top: 12px;}
.twitter img{width:100%;}

.footer{font-size: 9px; color: #CCC;}
.copyright{float:left;}
.privacy-main {float:left;}
.privacy {float:left;font-size: 10px;font-weight: bold;}
.privacy a {color: #CCC;}
.privacy a:hover {color: #8cc541;}
.designby{float:right;}
.designby a{ color: #CCC;text-decoration: none;}
.designby a:hover{ color: #8cc541;}
.line-bar {margin:0 3px 0 3px;font-size: 9px;font-weight: normal;}

/* LANDING PAGE */

.wrapFix{background:url(../images/thesohoagency_landing.jpg) no-repeat; background-size:cover !important; position:fixed; width:100%; min-height:100%; height:100%; left:0; top:0px;}
.wrapFix .containerFix{border:0; position:absolute; width:50%; height:500px; top:50%; left:50%; transform-origin: 50% 50% 0px; transform:translate(-50%,-50%) scale(1.1);  text-align:center;}
.wrapFix .containerFix .logoBig{margin-top: 20%;}
.wrapFix .containerFix .logoBig img{margin:0 auto;}
.wrapFix .containerFix h2{pointer-events: auto; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 30px; overflow-wrap: break-word; font-weight: bold; margin-top:40px;}
.wrapFix .containerFix h2 a{width: 65px; height: 23px; display:inline-block; vertical-align:middle; margin-top:0;}
.wrapFix .containerFix a{color:rgb(236, 29, 39); font-size: 18px; text-align: center; font-weight: bold;  margin-top:40px;  display:inline-block;}
.wrapFix .containerFix a:hover{color:#fff;}

@media only screen and (max-width: 900px) {
	.wrapFix .containerFix{width:70%;}
}

@media only screen and (max-width: 767px) {
	.wrapFix .containerFix{width:80%;}
	.wrapFix .containerFix .logoBig {margin-top: 400px;}
	.wrapFix .containerFix h2{font-size:20px; margin-top: 9px}
	.wrapFix .containerFix a{margin-top: 10px}
}