/*-------------------------------------------------------*/
	/* Media Queries */
/*-------------------------------------------------------*/
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

            /* Common section starts */
            .container{ width:750px; padding:0px 5px;  }

            .title h1 {
                font-size: 28px;
                line-height: 40px;
            }

            h2 {
                font-size: 20px;
                line-height: 35px;
            }

            /*intro*/
            #intro_s1 h1 {
                font-size:36px;
            }
            #intro_s2 ul {
                padding-left: 150px;
            }
            #intro_s2 ul  li .intro_det{ left: 70px; }
            #is2l1{ font-size: 80px;line-height: 80px; }
            #is2l1 .intro_det{ top:-45px; }
            #is2l2{ font-size: 40px;line-height: 40px; }
            #is2l2 .intro_det{ top:-136px; }
            #is2l3{ font-size: 42px;line-height: 41px; }
            #is2l3 .intro_det{ top:-188px; }
            #is2l4{ font-size: 30px;line-height: 30px; }
            #is2l4 .intro_det{ top:-240px; }

            /*main nav*/
            #nav_circles li a {
                font-size: 20px;
                line-height: 24px;
            }
            #nav_circles li {
                margin: 10px 15px;
            }
            .grey_circle {
                height: 100px;
                width: 160px;
            }

            /*download*/
            .download_circle {
                height: 20px;
                margin: 40px auto 20px;
                width: 80px;
            }

            /*brands*/
            #brand_list li.brand_unilever { margin-left: 5px; }
            #people_list li.ppl_next{
                margin-left: 5px;
            }
    
            #people_list { width:685px; margin: 0 auto; }
    #brand_list { width:520px; margin:0 auto; }
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 481px) and (max-width: 768px) {

            /* Common section starts */
            .container{ width:460px; padding:0px 5px; }
            .title h1 {
                font-size: 24px;
                line-height: 35px;
            }

            h2 {
                font-size: 18px;
                line-height: 25px;
            }
            /*intro*/
            #intro_s1 h1 {
                font-size:32px;
            }
            #intro_s2 ul {
                padding-left: 60px;
            }
            #intro_s2 ul  li .intro_det{ left: 50px; }
            #is2l1{ font-size: 60px;line-height: 60px; }
            #is2l1 .intro_det{ top:-45px; }
            #is2l2{ font-size: 30px;line-height: 30px; }
            #is2l2 .intro_det{ top:-136px; }
            #is2l3{ font-size: 32px;line-height: 32px; }
            #is2l3 .intro_det{ top:-188px; }
            #is2l4{ font-size: 22.8px;line-height: 23px; }
            #is2l4 .intro_det{ top:-240px; }

            /*main nav*/
            #nav_circles li a {
                font-size: 18px;
                line-height: 22px;
            }
            #nav_circles li {
                margin: 10px;
            }
            .grey_circle {
                height: 80px;
                width: 140px;
            }

            /*download*/
            .download_circle {
                height: 20px;
                margin: 40px auto 20px;
                width: 80px;
            }

            /*brands*/
            #brand_list li.brand_unilever { margin-left: 5px; }

            /*timeline*/
            .timeline_wrap { margin-left: 0; }
            ul.timeline { margin-left: 0; }
            ul.timeline li .info_left { left: 130px; }
            
            #people_list li.ppl_next{
                margin-left: 5px;
            }
    
    /** Fixes **/
            #people_list, #brand_list { width:345px; margin: 0 auto; }
            #nav_circles .row2 { margin-left:0; }
    
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px), screen and (device-aspect-ratio: 40/71){

/* Common section starts url(images/mobi_bg.jpg) top right no-repeat fixed */
body{ background: #000; padding: 0; font-size: 12px; }
#main_site { display: none; }
#mobi_site { display: block; }
#header { border-bottom: 1px solid #4D4D4D; height: 50px; width: 100%; background: #000; position: relative; }
#header .logo { padding-top: 5px; top: 15px; left: 15px; }
#header .slogan { position: absolute; right: 70px; top:20px; }
#header .nav { float:right; background: url(images/mobi_nav.png) 0 0 no-repeat; width: 50px; height: 50px; border-left: 1px solid #4D4D4D; }
#header .nav.hi { background-position: 0 -50px;  background-color: rgba(204,204,153,0.9);}
#header .nav ul { list-style: none; width: 100%; background: rgba(204,204,153,0.95); position: absolute; left: 0; top: 50px; display: none; z-index: 999; }
#header .nav.hi ul{ display: block; }
#header .nav ul  li{ border-top: 1px solid #000; background: url(images/nav_icons.png) right -379px no-repeat;}
#header .nav ul  li a{ display: block; text-decoration: none; font-size: 12px; padding: 18px; color: #000; }
#header .nav ul  li a:hover { color: #444; }
#header .nav ul  li a span { text-decoration: underline; font-size:9px; padding-left: 5px; }
#footer { background: #000; padding: 0; width: 100%; position: relative;
	outline: 1px solid rgba(0, 0, 0, 0); /*fix ios scroll issue*/}
#footer p{ padding: 10px; text-align: center; margin:0;}
#mobi_scroll{
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	height: 400px;
	position: relative;
}
.invert { color: #000; background: rgba(204,204,153,0.8); }
.invert a { color: #000; }
a.call { background: #000; border: 1px solid #cc9; color: #cc9; font-size: 18px; padding: 10px 25px; box-shadow: 0 0 0 1px #000; text-decoration: none; display: inline-block; }
.container { text-align: center; padding: 50px 20px; width: auto; }
.title { padding: 0; }
.title h1 { font-size: 24px; }
.title h2 { font-size: 16px; line-height: 25px; }
#mobi_intro { padding: 40px 20px 120px 20px; }
#mobi_intro li span{text-decoration: underline; text-transform: uppercase; text-align: left; }
#is2l1 { font-size: 48px;line-height: 60px; }
#is2l2 { font-size: 24px;line-height: 35px; }
#is2l3 { font-size: 25px;line-height: 35px; }
#is2l4 { font-size: 18px;line-height: 25px; }
#mobi_intro .intro_det{ padding: 10px; display: none; font-size: 12px; line-height: 20px; text-align: justify; }
#contact_switch { font-size: 14px; padding: 10px 0; }
#contact_switch a { text-decoration: none; font-size: 14px; padding: 0 10px; }
#contact_switch a.hi { text-decoration: underline; }
.video iframe{ width:100%; height:180px; margin:30px 0;}
.circle_arrows { position: absolute; width: 100%; margin-top: -25px; }
.icon_next { width: 50px; height: 50px; border-radius: 40px; background-position: 18px -219px;}
}