/* ==========================================================================
   CONTENT - RESPONSIVE.css
   ========================================================================== */

/*
 * 1. BUTTERFLY RESPONSIVE
 * 2. STANDARD
 * 3. TABLE - PORTRAIT
 * 4. MOBILE - LANDSCAPE
 * 5. MOBILE - PORTRAIT
 */


/* 1. BUTTERFLY RESPONSIVE
   ========================================================================== */

/*@import url('responsive-butterfly.css');*/

/* 2. STANDARD
   ========================================================================== */
 @media only screen and (max-width:1320px) {
.dropdown-block .phone-dropdown {
  width: 278px;
  top: -58px
}
.dropdown-block.social-icons {
  z-index: 9;
  position: relative
}
.top .award-top {
  margin-left: 247px;
  right:0;
}
#header .top {
  margin-bottom: 45px
}
.blog {
  font-size: 11px
}
.help-centre {
  font-size: 11px
}
.sub-menu {
  font-size: 11px
}
.banner {
  font-size: 10px
}
#header .social-icons li {
  display: none
}
#header .dropdown-block.social-icons {
  margin-top: 30px;
  margin-left: 35px
}
#header .main-menu {
  margin-right: 0px
}
#header .dropdown-block.social-icons {
  font-size: 18px
}
.t-hot-digital-trends-for-2014 .image.four.cols {
  border: none;
}
#header .main-menu li.level1 > a, #header .main-menu li.level1 > span {
    font-size:25px;
}

}
@media only screen and (min-width:1101px) and (max-width:1320px) {
.t-hot-digital-trends-for-2014 .image.four.cols {
  border-right: 5px #fff solid;
  padding-right: 120px;
margin-right: 50px;
}
}
@media only screen and (min-width:768px) and (max-width:959px) {
.t-hot-digital-trends-for-2014 .text.five.cols {
  padding-left: 0px;
}
.t-hot-digital-trends-for-2014 .image.four.cols {
  border: none;
}
.top .award-top {
  margin-left: 247px
}
.hidden-table {
  display: none !important
}
.blog {
  font-size: 11px
}
.layout-left-right .fluid .one.col, .layout-left-right .fluid .two.cols, .layout-left-right .fluid .three.cols, .layout-left-right .fluid .four.cols {
  min-width: 50%;
}
.t-hot-digital-trends-for-2014 .image.four.cols{width:100%;}
.fluid .offset-by-one, .fluid .offset-by-two, .fluid .offset-by-three, .fluid .offset-by-four, .fluid .offset-by-five, .fluid .offset-by-six, .fluid .offset-by-seven, .fluid .offset-by-eight, .fluid .offset-by-nine {
  padding: 0
}
.layout-left-right .fluid .five.cols, .layout-left-right .fluid .six.cols, .layout-left-right .fluid .seven.cols, .layout-left-right .fluid .eight.cols, .layout-left-right .fluid .nine.cols {
  max-width: 50%
}
.help-centre {
  font-size: 10px
}
.help-centre .icon-block {
  width: 33.33%;
  clear: none !important
}
.help-centre .icon-block:nth-child(3n+1) {
  clear: left !important
}
.sub-menu {
  font-size: 9px
}
.banner {
  font-size: 8px
}
#header {
  margin-bottom: 50px
}
.banner img {
  height: 300px;
  width: auto;
  max-width: none
}
.mobile-websites-apps .banner img,
.website-development .banner img,
.strategy .banner img,
.creative-web-design .banner img,
.help-support .banner img {
    width:100%;
}
}
@media only screen and (max-width:1005px) {
#header .main-menu {
  float:left;
  width:100%;
}
}
@media only screen and (max-width:1100px) {
.t-hot-digital-trends-for-2014 .text.five.cols {
  padding-left: 0px;
}
.t-hot-digital-trends-for-2014 .image.four.cols {
border-right: 5px #fff solid;
padding-right: 100px;
margin-right: 40px;

}
.sub-menu {
  font-size: 8px
}
.sub-menu .container--full-right-width { margin-right: 30px; }
.sub-menu a {
  color: #fff;
  position: relative;
  display: block;
  padding-right: 10%
}
.sub-menu ul, .sub-menu label.close {
  display: none;
  height: 100%
}
.sub-menu label {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  padding: 1.250em 0
}
.sub-menu label.open:after {
  content: '\203A';
  font: bold 1.667em sans-serif;
  position: absolute;
  display: block;
  right: -25px;
  top: 50%;
  margin-top: -0.6em
}
.sub-menu label.close:after {
  content: 'x';
  font: bold 1.1em sans-serif;
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.1667em;
  margin-left: .5em
}
.sub-menu input[type=checkbox]:checked ~ label.open {
  display: none
}
.sub-menu input[type=checkbox]:checked ~ label.close {
  display: inline-block
}
.sub-menu input[type=checkbox]:checked ~ ul {
  display: block;
  padding-bottom: 10px
}
.sub-menu input[type=checkbox]:checked ~ ul li {
  width: 45%;
  margin: 0;
  margin-right: 5%
}
.sub-menu input[type=checkbox]:checked ~ ul li a:after {
  content: '\203A';
  position: absolute;
  top: -0.45em;
  right: 0;
  display: block;
  font: bold 1.667em sans-serif;
  color: #fff
}
.sub-menu input[type=checkbox]:checked ~ ul li:nth-child(odd) {
  clear: left
}
p#bfElemWrap775, p#bfElemWrap776, p#bfElemWrap777 {
  width: 100%;
  float: none
}
p#bfElemWrap775, p#bfElemWrap777 {
  margin-bottom: 17px
}
}
@media only screen and (max-width:767px) {
.t-hot-digital-trends-for-2014 .text.five.cols {
  padding-left: 15px;
}
.t-hot-digital-trends-for-2014 .image.four.cols {
  border: none;
}
.container {
  margin: 0 30px
}
.banner .hidden-block {
  display: none !important
}
h5 {
  font-size: 26px
}
h6 {
  font-size: 22px
}
.fluid .one.col, .fluid .one.cols, .fluid .two.cols, .fluid .three.cols, .fluid .four.cols, .fluid .five.cols, .fluid .six.cols, .fluid .seven.cols, .fluid .eight.cols, .fluid .nine.cols {
  width: 100%
}
.fluid .offset-by-one, .fluid .offset-by-two, .fluid .offset-by-three, .fluid .offset-by-four, .fluid .offset-by-five, .fluid .offset-by-six, .fluid .offset-by-seven, .fluid .offset-by-eight, .fluid .offset-by-nine {
  padding-left: 0
}
.blog .image {
  text-align: center !important
}
.blog.layout-left-right .odd .fluid img, .blog.layout-left-right .even .fluid img {
  max-width: 100%;
  margin: 0
}
#header {
  margin-bottom: 30px
}
#header .dropdown-block.social-icons {
  font-size: 16px
}
#header .main-menu li.level1>a, #header .main-menu li.level1>span {
  font-size: 20px;
  margin-right: 10px
}
#header .main-menu li.level1>a, #header .main-menu li.level1>span {
  font-size: 17px
}
#header .bold-statement p {
  font-size: 26px
}
#header .bold-statement strong, #header .bold-statement b {
  font-size: 40px
}
.blog {
  font-size: 9px
}
.blog.layout-left-right .fluid .col, .blog.layout-left-right .fluid .cols {
  display: block
}
.blog.layout-left-right .even .fluid {
  direction: ltr
}
.blog.layout-left-right .container {
  margin: 0
}
.blog.layout-left-right .text, .blog.layout-left-right .image {
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto
}
.help-centre {
  font-size: 10px
}
.help-centre .page-title-block .space {
  padding-left: 30px
}
.help-centre .icon-block {
  width: 50%
}
.help-centre .icon-block .space {
  padding-left: 10%;
  padding-right: 10%
}
.help-centre .icon-block:nth-child(2n+1) {
  clear: left
}
.banner {
  font-size: 7px
}
.banner img {
width: 100%;
height: auto;
min-height: 0;
}
.banner .text {
  top: 50%
}
.banner .text.nomenu {
  top: 25%
}
.banner .text .title {
  font-size: 28px
}
.banner .text .sub-title {
  font-size: 20px
}
#footer .main-menu a, #footer .main-menu span {
  font-size: 20px
}
#footer .contact h4 {
  font-size: 22px
}
#footer .contact p {
  font-size: 18px
}
#header #logo {
    margin-top:26px;
    min-width:0px;
    max-width:60%;
}
#logo img{
    max-height:30px;
}
.top .main-menu .award-top {
    margin-top: -137px !important;
}
@media only screen and (max-width:480px) {
#footer .nav.main-menu li.level1 {
    float:none;
}
.t-hot-digital-trends-for-2014 .image.four.cols {
  border: none;
}
#header .main-menu li.level2>a {
  padding: 12px 10px 12px 19px
}
#header .main-menu {
  margin-right: 0
}
#header .dropdown-block.social-icons {
  margin: 0
}
#header .main-menu .award-top .separator img {
  width: 50%
}
#header .main-menu .award-top {
  margin-left: -149px;
  margin-top: -175px !important;

  margin:0!important;
  position:absolute;
  top:0;
  right:0;

}
#header .main-menu .award-top ul {
  height: 120px;
  width: 240px;
  margin-left: 205px
}
#header .main-menu .award-menu>span {
  height: 40px;
  width: 40px
}
#header .main-menu .award-top ul li {
  width: 60px;
  height: 55px
}
#header .main-menu .award-top ul li a img {
  max-width: 100%
}
.dropdown-block .phone-dropdown {
  padding: 12px 12px;
  font-size: 12px
}
#header .main-menu .award-menu .image-title {
  display: none
}
html {
  width: 100%
}
#header .social-icons {
  margin-top: 35px !important
}
#header .main-menu li.item-292>span.separator {
  height: auto;
  padding: 10px 0;
  width: 41px;
  float: right;
  clear: both
}
#header .main-menu li.item-292>span.separator img {
  width: 50%;
  margin: 0
}
#header .main-menu li.item-292:hover {
  width: 100%
}
#header .main-menu li.item-292:hover ul, #header .main-menu li.item-292 ul {
  width: 100%;
  margin: 0
}
#header .main-menu li.item-292:hover ul {
  height: 292px
}
#header .main-menu li.item-292 li {
  width: 33%;
  height: 87px
}
#header .dropdown-block.social-icons {
  width: 30%;
  min-width: 190px;
  position:absolute;
  top:0;
  right:50px;
}
#header .dropdown-block.social-icons .phone_btn img {
  width: 70%
}
#header .phone-dropdown {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: -24px
}
.quote-button {
  display: none
}
h5 {
  font-size: 24px
}
h6 {
  font-size: 20px
}
#header .bold-statement p {
  font-size: 20px
}
#header .bold-statement strong, #header .bold-statement b {
  font-size: 28px;
  line-height: 1.3
}
.banner .text .title {
  font-size: 24px
}
.banner .text .sub-title {
  font-size: 18px
}
.help-centre .icon-block {
  width: 100%
}
.banner {
    display:none;
}
.sub-menu {
    position:relative;
}
.blog .image.big {
  display: none
}
.blog .image.small {
  display: block
}
#footer .contact h4 {
  font-size: 20px
}
#footer .contact p {
  font-size: 16px
}
.nav.menu .last ul {
  right: 0;
  left: inherit !important
}
.nav.menu .item-145 ul {
  right: -50%;
  left: inherit !important
}
.nav.menu .item-143 ul {
  right: -300%;
  left: inherit !important
}
.nav.menu .item-144 ul {
  right: -130%;
  left: inherit !important
}

.blog.layout-left-right .even .fluid .t-hot-digital-trends-for-2014 img {
  width: 480px;
}
.t-hot-digital-trends-for-2014 ul li {
font-size: 15px;
width: 200px;
min-height: 80px;
}
.t-hot-digital-trends-for-2014 #google_analytics2,.t-hot-digital-trends-for-2014 #brand_strategy2,.t-hot-digital-trends-for-2014 #max_budget2{
padding-left:100px
}
.t-hot-digital-trends-for-2014 .image.four.cols{
  padding-right:10px;
  padding-left:10px
}
.blog.c-sessions iframe.share-the-wealth{
  width:300px;
}
}
@media only screen and (min-width:481px) and (max-width:654px) {
.t-hot-digital-trends-for-2014 .text.five.cols {
  padding-left: 30px;
}
.t-hot-digital-trends-for-2014 .image.four.cols {
  border: none;
}
.top .award-top {
  margin-left: 0
}
.t-hot-digital-trends-for-2014 .image.four.cols{
padding-right:10px;
padding-left:10px}

}
@media only screen and (min-width:437px) and (max-width:480px) {
.t-hot-digital-trends-for-2014 .image.four.cols {
  border: none;
}
#header .dropdown-block.social-icons {
  margin-top: 40px !important;

  position:absolute;
top:0;
right:50px;
margin:0!important;
}
}

.mobileOnly{display:none;}
/**Mobile Class**/
@media only screen and (max-width:654px) {
    #header .bold-statement p strong, #header .bold-statement p b {
        font-size:26px;
    }
    #header .top {margin-bottom:15px;}
    #header .main-menu {display:none;}
	.mobileOnly {display:block;}
	.mobileHide{display:none;}
    #mobile-menu{width:20px;float:right;margin-top:14px;display:block;}
	#mobile-menu .mobileMenu {
		position: absolute;
		left: 0;
		top: 80px;
        width:100%;
		background-color: #ba002a;
		z-index:99999999;
        display:none;
        box-sizing:border-box;
        padding: 35px 30px;
	}
	#mobile-menu .mobileToggleParent {
        width:20px;
    }
	#mobile-menu .mobileMenu > .first {
        display:none;
    }
	#mobile-menu .mobileMenu > li {
        min-height:47.5px;
        line-height:47.5px;
        background:url('../img/mobileaccordionarrow.jpg') top right no-repeat;
        background-size:50px;
		border-bottom:2px solid #cc0033;
	}
    #mobile-menu .mobileMenu > li.open {
        background-image:url('../img/mobileaccordionarrow-down.jpg');
    }
	#mobile-menu .mobileMenu > li span {
		color:white;
	}
	#mobile-menu .mobileMenu > li:nth-child(2) {
		border-top:2px solid #cc0033;
	}
	#mobile-menu .mobileMenu > li span,
	#mobile-menu .mobileMenu > li  li > a {
		text-transform:lowercase;
		padding:0 0 0 1.5em;
		cursor:pointer;
		font-weight:bold;
		display:block;
		font-size:1.5em;
	}
	#mobile-menu .mobileMenu > li  li > a {
		background-color:white;
		color:#cc0033;
		margin-bottom: 2px;
	}
    #mobile-menu .mobile-menu-open {
        display:none;
        left:0;
        transition:1s ease-out;
    }
    #mobile-menu .level1 ul {display:none;}
    #header .dropdown-block.social-icons {
        width:auto;
        min-width:0;
        position:inherit;
        float:right;
        margin: 0 10px 0 0!important;
    }
}