/* BASICS */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,200,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

p, ol {padding: 0;margin: 0.5em 0 0.5em 0;font-size: 14px;line-height: 160%;margin-bottom: 5px;color: #333;font-weight: 300;}
ul {font-size: 14px;}
li {line-height:160%;padding:0;margin:0.25em 0 0.25em 0;}
ol {margin-left: 2.0em;}
img {border:0;margin:0;padding:0;}
body {font-family: 'Roboto' !important; font-style: normal; font-weight: 300; /* fix old pages */ color: #333;} 
h1, h2, h3 {font-weight: 300; margin:0; padding: 0}
p a, ol a {color: #333; text-decoration: underline; font-weight: bold;}
strong {font-weight: 700;}
hr {margin: 20px 0;}
a {color: #333; text-decoration: none;}

.page {
	width: 95%;
	margin: auto;
	top: 170px;
}

.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
	margin-bottom: 30px;
}

.row {
	clear: both;
	margin-bottom: 20px;
}


.navigation {
	background-color: #1A1A1A;
	top: 0;
	position: absolute;
	margin-bottom: 12px;
	border: none;
	background-image: url(/assets/img/bg-nav.png);
	background-repeat: no-repeat;
	background-size: 480px;
	background-position: -150px -90px;
	padding: 0 !important;
}

.col.menu {
	width: 100%;
	position: relative;
	top: 100px;
	clear: both;
}

#briefing.col.navigation {padding-top: 6px !important;} /* fix old pages */

#fill-nav {height: 155px;}

.navigation ul, #menu ul {list-style: none; text-transform: uppercase; font-weight:300!important;}



.footer h1, .footer h2, .footer h3 {
	font-family: 'Droid Serif', serif !important;
	font-weight: normal;
}

.dotted.white {
	border: 1px dotted #fff;
	border-style: none none dotted;
	color: #333;
	background-color: #333;
	padding: 10px 0;
	width: 100%; /* fix new layout */
}

.notification {
	float: right;
	background-color: #FFE964;
	color: #312602;
	display: table;
	height: 50px;
	width: auto;
	padding: 0 20px;
	/*background-image: url(/assets/img/triangle-notification.png);
	background-repeat: no-repeat;
	background-position: left bottom;*/
	position: relative;
	top: 0px;
}

.notification p {
	font-size: 17px;
	display: table-cell;
	vertical-align: middle;
}



.notification.sq {
	float: left;
	background-size: 3%;
	padding-left: 24px;
	padding-right: 5px;
	height: 22px;
	width: 90%;
	top: -13px;
	margin-right: 0%
}

.notification.sq p{
	font-size:12px;
	line-height: 110%;
}

a.arrow.white {
	background-image: url(/assets/img/icon-arrow-white.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 30px!IMPORTANT;
	background-size: 24px;
	position: relative;
	text-align: center;
}

a.arrow.grey {
	background-image: url(/assets/img/icon-arrow-grey.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 26px;
	background-size: 24px;
}

.arrow-big {
	width: 40px;
	margin: 3% 40%;
}

.arrow-big:hover {
	opacity: 0.8;
}

a.download {
	background-image: url(/assets/img/download.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 30px;
	background-size: 24px;
	position: relative;
	top: 40px;
	float: left;
	text-align: center;
}


.button {
	padding: 8px;
	color: #FFF;
	border-radius: 2px;
	text-decoration: none;
}


.button:hover {
	opacity: 0.8;
}

.pink {
	background-color: #ff00c7;
}

.blue {
	background-color: #32C3F7;
}

.blue2 {
	background-color: #49e;
}

.green {
	background-color: #22a773;
}

.orange {
	background-color: #f90;
}


.black {
	background-color: #3C3C3C;
}

.stripe {
	background: #FFF url(/assets/img/stripe.png);
	margin: 0;
	height: auto;
	overflow: auto;
}

.line {
	float: left;
	width: 100%;
	background: url('/assets/img/premium/line.png') center repeat-x;
	margin: 10px 0 0 0;
}

.line span {
	background: #FFF;
	padding: 0 10px;
	font-size: 14px;
}

.hide {display: none;}

/* TOP NAV */
       
#main-menu {z-index: 1000;position: relative;}

ul.social-nav li {float: right; margin-right: 10px; display: inline-block;}

li.social-nav  a {
   float: left;
}

.facebook-icon-nav, .twitter-icon-nav, .gplus-icon-nav, .linkedin-icon-nav, .rss-icon-nav {
	width: 25px;
	height: 25px;
}
.facebook-icon-nav img, .twitter-icon-nav img, .gplus-icon-nav img, .linkedin-icon-nav img, .rss-icon-nav img {
	width: 25px;
	height: 25px;
}

#search {
	float: right;
	margin-top: 6px;
	margin-right: 15px;
}

input#sbi {
	border-radius: 12px;
	border: none;
	color: #B4B4B4;
	height: 20px;
	padding-left: 10px;
}

input#sa {
	width: 18px;
	margin-left: 5px;
}

/* LOGO NAV */

#wrapper-logo {
	clear: right;
}

#logo-nav {
	width: 120px;
	margin-bottom: 1%;
	margin-left: 8%;
	float: left;
	margin-top: -20px;
}

#tagline-nav {
	color: #CCC;
	float: right;
	font-size: 13px;
	width: 390px;
	margin-top: 20px;
	border-top: 1px dotted #CCC;
	padding: 12px 5px;
}

/* MENU */

#menu-wrapper {width:100%; height:45px;position: relative;}

/*#menu {
	width: 100%;
	height: 100%;
	background: #FFF;
	margin: -1% auto;
	text-align: center;
}

#menu ul {
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   text-align:center;
   font-size: 14px;
   text-transform: uppercase;
   display: inline-table;
}  */

 
#menu li {
   display:block;
   float:left;
   margin:0;
   padding:0;
}

#menu ul li {
	padding: 12px 6px;

} 

#menu ul li a {
   display:block;
   color:#000 !important;
   text-decoration:none;
   -webkit-transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;
   font-weight: 400 !important; /* fix old pages */
   
} 

#menu ul li span {
	font-size: 11px;
	vertical-align: middle;
	padding: 3px 3px 0 2px;
	font-weight:300;
}

#menu ul li a:hover {
	opacity: 0.5;
}

#menu ul ul {
	display: none;
}

	#menu ul li:hover > ul {
		display: block;
	}
		
	#menu ul ul {
	padding: 0;
	position: absolute;
	top: 100%;
	margin-top: -5%;
	width: 90%;
	margin-left: 2%;
	}
	
	#menu ul ul li {
		float: none; 
		position: relative;
		color: #333;
		text-align: left;
		padding: 5px;
		margin-left: -6%;
	}
		#menu ul ul li a {
			padding: 0.3em;
			color: #333;
		}	
						
			#menu ul ul li a:hover {
			opacity: 0.7;
			text-decoration: underline;
			}
			
	#menu ul ul li, #menu ul ul li a {background-color:#F8F8F8;}		
	
		
 
/*-- fixed 2013-08-08 

 .flexnav li a {
    position: relative;
    display: block;
    padding: .5em;
    z-index: 2;
    overflow: hidden;
    } */
	
 .flexnav {
    overflow: visible; margin-top: -4%;}
	
	  
  .flexnav li {
      position: relative;
      list-style: none;
      float: left;
      display: block;
      overflow: visible; 
	 }
	  
  
.menu-button {
    display: none; } 
	

.flexnav li.home-nav {width:5%;}
.flexnav li.briefing-nav {width:12%;}
.flexnav li.premium-nav {width:14%;}
.flexnav li.regional-nav {width:13%;}
.flexnav li.tips-nav {width:6%;}
.flexnav li.live-nav {width:12%;}
.flexnav li.about-nav {width:10%;}
.flexnav li.contact-nav {width:6%;}
.flexnav li.premium-login-nav {width:14%;}  
	
	
	
	
		
#menu li.bar-nav {
	padding: 14px 0;
	color: #333; /* fix old pages */
}        
        
.premium-login-nav a {
color: #D3D3D3 !important;
font-size: 12px;
}

.premium-login-nav {
background-color: #555;
color: #D3D3D3;
text-align: left;
width: auto;
float:right;
padding: 5px;
margin-top: 2%;
}

.premium-login-icon-nav img {
width: 20px;
height: 20px;
vertical-align: middle;
}
	

#menu li.premium-login-nav a {background-color: #555; color: #D3D3D3 !important; }   



/*

UGLY FIX FOR NAVIGATION OVERFLOW


*/


#menu-mobile {display: none;}








/*BOXES*/

.wrapper-boxes {width: 90%;margin-left: 4%;margin-top: 4%;}

.wrapper-boxes-hp {width: 100%;}


.title-span_4 {
	font-size: 15px !important;
	text-transform: uppercase;
	text-align:left;
	border-top: 1px dotted #777;
	padding-top: 5px;
}

.span_4 p { 
	width: 95%;
	margin-top: 6%;
	border-bottom: 1px dotted #777;
	padding-bottom: 5%;
	min-height: 65px;
}

.wrapper-25 {
	background-repeat: no-repeat;
	background-position: center center;
	height: 200px;
	width: 100% !important;
	margin-top: 10px;
	background-size:100%;
}

.wrapper-25.jobs {
	background-image: url(/assets/img/about/boxes-hiring.png);
}

.wrapper-25.spotters {
	background-image: url(/assets/img/about/boxes-happyspotting.png);
}

.wrapper-25.media {
	background-image: url(/assets/img/about/boxes-media.png);
}

.wrapper-25.contact {
	background-image: url(/assets/img/about/boxes-contact.png);
}

.hover-layer {
	display: none;
	position: relative;
	top: 0;
	background-image: url(/assets/img/about/hover-layer.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 200px;
	width: 100% !important;
	background-size: 100%;
	
} 



.wrapper-25:hover .hover-layer {display: block;}

.hover-layer.hp {background-image: url(/assets/img/apac/hover-layer-apac.png);} 

.hover-layer.africa { background-image: url(/assets/img/africa/hover-layer-africa.png); }

.hover-layer.sca { background-image: url(/assets/img/sca/hover-layer-sca.png);}

.hover-layer.apac { background-image: url(/assets/img/apac/hover-layer-apac.png);}


/* FOOTER */
       
.footer {
	background-color: #1E1E1E;
	position: absolute;
	border: none;
	margin-top: 3%;	
	text-align: center;
}

.footer, .footer p {
	color: #DDDDDD !important /* important - fix for old layout */;
}

.footer h2 a:link, .footer h2 a:visited {color: #EEEEEE; text-decoration:none; font-weight: normal;}
.footer h2 a:hover {font-weight:bold; color: #fff; }

.footer p a:link, .footer p a:visited {color: #DDDDDD; text-decoration:none; font-weight: 100;}
.footer p a:hover {font-weight:300; color: #fff;}

.footer h1, .footer h2 {
	font-size: 20px !important;
	color: #fff !important;
}

.footer h2 {margin-bottom: 5%; padding-bottom: 4%; border-bottom: 1px dotted #333;}

.footer h3 {
	font-family: 'Roboto Condensed'!important;
	font-size: 13px;
	color: #CCCCCC;
	text-transform: uppercase;
}

.footer .col {width: 19%; margin-top:2%;}






/*nav fix*/



 @media  screen and (min-width: 760px) and (max-width: 979px) {
	
	#menu li.home-nav {display:none;}
	.flexnav li.live-nav {width:17%;}
    .flexnav li.about-nav {width:10%;}
    .flexnav li.regional-nav { width: 13%; }
    .flexnav li.briefing-nav  {width:15%;}
	.flexnav {width: 92%; margin-left: -5%;}
	.flexnav li.premium-nav { width: 12%; }
	.menu-premium li.target:before {left:15%;}
	 
 }
 
 
 @media  screen and (min-width: 980px) and (max-width: 1080px) {
	
	#menu li.home-nav {display:none;}
	.flexnav li.live-nav {width:13%;}
	.flexnav li.about-nav {width:9%;}
	.flexnav li.premium-nav {width:17%;}
	.flexnav li.regional-nav {width:13%;}
	.flexnav li.briefing-nav {width:15%;}
	.flexnav li.tips-nav {width:4%;}
	.flexnav {width:100%; margin-top: -3%; }
	#menu ul li a {font-size:14px;}
    .premium-login-nav {margin-top: 1%;}
	 
 }
 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  
  .divider {font-size: 22px; }
  
  .footer h2 {font-size:14px!important;}
  .footer p {font-size:12px;}
  
  
}

@media only screen and (min-width : 0px) and (max-width : 1024px) {
	.notification p {
			font-size: 15px;
		}
	.notification {
			height: 40px;
		}
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	
		.flexnav { margin-top: -3%;}
		.premium-login-nav {margin-top: 1%;}

	
}

@media screen and (min-width: 1025px)  and (max-width: 1179px)  {
	.flexnav {padding-top: 1%; margin-top: -3%;}
	.premium-login-nav {margin-top: 3%;} 
	.flexnav li.regional-nav { width: 12%; }
	.flexnav li.premium-nav {width:14%;}

}



@media screen and (min-width: 1180px) and (max-width: 1279px) {
	.flexnav {padding-top: 1.5%; margin-top: -3%;}
	.flexnav li.home-nav {width:5%;}
	.premium-login-nav {margin-top: 3%;}
	.flexnav li.premium-nav {width:15%;}

}

@media screen and (min-width: 1280px) {
	.flexnav li.home-nav {width:5%;}
	.flexnav {padding-top: 1.5%; margin-top: -3%;}
	.premium-login-nav {margin-top: 3%;}
	#menu ul ul {margin-top:-1%}
	

}

@media screen and (min-width: 1680px) {
	.wrapper-25  {background-size: 70%;}
	.wrapper-25  {background-size: 75%;}
}





    /* 1 Column Grid 0px - 480px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) and (max-width: 480px) {
    
		.page {
			width: 100% !important;
		}
        
        .row {
            margin-left:-10px;
        }
        
        .col {
            border-left-width:10px;
        	padding:0 8px;
        }
        
        #logo-nav {
	        width: 140px;
			margin-bottom: 1%;
			margin-left: 3%;
		}
        
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1,
        .footer {
            margin-left:0;
            width:100% !important;
        }
        
         .footer .col {
			width: 100%;
		}
        
               
        /* CONTENT HIDDEN */
        
         #menu, #tagline-nav, #topnav, .col.premium-footer, .col.regional-footer, .col.presentation-footer, .premium-login-nav {display: none;}
        
        /* CONTENT CHANGED */
        
		.col.navigation {height: 60px;}
		        
        #menu li.menu-nav {display: inherit !important;}
       
        #wrapper-logo {padding: 20px 30px;}
        
         /* menu mobile */
         
         #menu-wrapper {margin-top: -90px;margin-bottom: 20px;}
         
         #menu-mobile {
         	display: block;
         	margin: 0;
			border-bottom: 1px dotted #333;
			overflow: auto;
			padding-bottom: 10px;
}
         
         #menu-mobile ul {
         	list-style: none;
		 	margin: 7px;
		 	padding: 0;
		    font-size: 12px;
		    text-transform: uppercase;
		 }
         
         #menu-mobile li {float: left;margin-right: 10px;}		 
		 
		 #menu-mobile a {color: #333; text-decoration: none;}
		 
		 
	    .framework {font-size:12px;}
		 
    }
    
    

    /* 2 Column Grid 481px - 779px - Ipad Portrait 
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    Span 3:    50%
    
    ----------------------------------------------------------------------------- */
	@media screen and (min-width: 0px) and (max-width: 768px) {

	
	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
        
        .page {
			width: 100%;
		}
		
        .row {
            margin-left:-10px;
        }
        .col {
            border-left-width:10px;
        	padding:0 8px;
        }
        
        
                 
         /* WIDTHS */
        
        .span_1,
        .footer{
            margin-left:0;
            width:100% !important;
        }
        
        .span_3
        {
            width:50%;
        }
        
       .footer .col {
			width: 45% !important;
		}
        
		.offices-footer {width:50% !important;}
		
         #logo-nav {
	        width: 140px;
			margin-bottom: 1%;
			margin-left: 3%;
		}
        
 
              
        /* CONTENT HIDDEN */
        
        .notification, 
        .col.about, 
        #search, 
        .premium-login-nav,
        .premium-footer,
        .regional-footer,
        .presentation-footer {
        	display: none;
        }
        
        /* CONTENT CHANGED */
        
        
        #tagline-nav {
	        font-size: 10px;
			width: 300px;
        }
		
		#menu {width:80%;}
		
		.flexnav li.live-nav  {width:20%;}
		
		#menu {display:none;}
		
			 /* menu mobile */
         
         #menu-wrapper {margin-top: -20px;margin-bottom: 20px; }
         
         #menu-mobile {
         	display: block;
         	margin: 0;
			border-bottom: 1px dotted #333;
			overflow: auto;
			padding-bottom: 10px;
}
         
         #menu-mobile ul {
         	list-style: none;
		 	margin: 7px;
		 	padding: 0;
		   font-size: 14px;
		   text-transform: uppercase;
		 }
         
         #menu-mobile li {float: left;margin-right: 10px; margin-bottom: 10px;}		 
		 
		 #menu-mobile a {color: #333; text-decoration: none;}
		 
         
   
        
    }

    /* 4 Column Grid 780px - Infinity - Desktops, laptops, Ipad Landscape
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    Span 2:    75%
    Span 3:    50%
    Span 4:    25%
    
    ----------------------------------------------------------------------------- */

  	
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 
 		.box33 {width:25%;}
		.box33.contact-premium {margin-left: 8%}
		.notification p {
			font-size: 16px;
		}

 }
 

 
     @media screen and (min-width: 0px) and (max-width: 720px) {

	   .col.landing-intro {
			margin-top:20%;
		}
        
}
  
  
    @media screen and (min-width: 780px) {
        
        .row {
            margin-left:-10px;
        }
        .col {
            border-left-width:10px;
        	padding:0 8px;
        }
        
        
        /* WIDTHS */
        
        .span_1,
        .navigation,
        .footer {
            margin-left:0;
            width:100%;
            margin-bottom:0;
        }
        
        .span_2 {
            width:75%;
        }
        
        .span_3,
        {
            width:50%;
        }
        
        .span_4 {
            width:25%;
        }
        
      
        /* HEIGHTS */
        
        
        .navigation {
        height: auto;
	        
        }
        
        .footer {
	        height: auto;
        }
               
    }
	
	
  @media screen and (min-width: 0px) and (max-width: 779px) {

   	   .wrapper-boxes {
			width: 98%;
			margin-left: 2%;
		}
			
		.title-span_4 {font-size: 13px !important;}
		
		.wrapper-25 {height: 140px; border-bottom: 1px dotted #777; padding-bottom: 5%; background-size: 110%;}
		
		.col.span_4 {margin-bottom: 10px;} 
		
		.span_4 p { display: none;}


 }
 
 
    @media screen and (min-width: 0px) and (max-width: 480px) { 	  
	
	.row .span_4 {display:none;} 
	
	.col.span_4.trend-briefing,
	.col.span_4.asia-bulletin,
	.col.span_4.sca-bulletin,
	.col.span_4.africa-bulletin {display:block;}
	
 }
	  
	
    
/* IE fixes ---- repeating desktop code out of @media---- */

.row {margin-left:-10px; }

.col {border-left-width:10px;padding:0 8px; border-color: transparent /* colour fix IE*/;}

	.span_1,
    .navigation,
    .footer {
        margin-left:0;
        width:100%;
    }
    
    .span_2 {
        width:75%;
    }
    
    
    .span_3 {
        width:49.999%; /* IE9 fix */
        clear: none;
    }
    
    .span_4,
    .spotters,
    .media,
    .methodology,
    .contact,
    .about {
        width:24.9%; /* IE9 fix */
        overflow: hidden;
    }
    
    .footer {clear: both;}