/*

RESPONSIVE-768.CSS

- Applied to 786px width and below (for iPhone display)

*/

/* ============================================================================
   Header: Screens where width < 768px
   ========================================================================= */

@media screen and (max-width: 768px) and (orientation: landscape) {

.header-image{
height: 270px;
}


  .header-logo {
    margin-top: -20px;
  }

  .home-header-images {
    height: 270px;
  }

  .home-header-image {
    height: 270px;
  }

  .home-header-image-next,
  .home-header-image-previous {
    top: 240px;
  }

  .header-home-boxes {
    top: -260px;
    background: #fff;
    height: 130px;
    padding: 30px 40px;
  }

  .header-home-box .bd p {
    margin-top: 1em;
  }

  .header-home-box .bd p:first-child {
    display: none;
  }

  .nav-info-box {
    top: 95px;
  }

}

/* Fix for Webkit position error */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio:0) and (orientation: landscape) {
  .header-home-boxes {
    top: -260px;
  }
}

@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio:0) and (orientation: portrait) {
  .header-home-boxes {
    top: -200px;
  }
}

@media screen and (max-width: 768px) and (orientation: portrait) {

.header-image{
height: 210px;
}

  .header-home-boxes {
    top: -200px;
    background: #fff;
    height: 140px;
    padding: 30px 40px;
  }
  
  .home-header-images {
    height: 210px;
  }

  .home-header-image {
    height: 210px;
  }
}

@media screen and (max-width: 768px) {
	
/* ============================================================================
	Webpart-zone - adjusting
   ========================================================================= */
	div.ms-webpart-zone {
		width: 100%;
		display: block;
	}
	div.ms-webpartzone-cell.ms-webpart-cell-horizontal{
		display: inline-block;
		width: 100%;
	}
	
/* ============================================================================
	Footer
   ========================================================================= */
	.footer-social, .footer-navlist {
		display : none;
	}
	.footer-navigation .container{
		width : auto;
	}
  .js-contact-form iframe {
    height: 700px;
  }

/* ============================================================================
	Module Teaser
   ========================================================================= */
	div.box-33.focus.image-only {
		width: 292px;
	}
	
/* ============================================================================
	Module Videos
   ========================================================================= */
	div.box-33.image-only.video {
		margin-bottom: 0;
		margin-left: 10px;
		margin-top: 10px;
	}
	ul.dfwp-column.dfwp-list li.dfwp-item div.whitespace + ul.dfwp-list li.dfwp-item:not(:nth-child(-n+4)){
		display: none;
	}
	ul.dfwp-column.dfwp-list li.dfwp-item div.whitespace + ul.dfwp-list {
		max-height: 535px;
		padding: 0px 26px 10px 22px;
	}

/* ============================================================================
	Module Latest updates - PR – Events
   ========================================================================= */
	div.ms-webpartzone-cell:not(.ms-fullWidth){
		border-top: none;
	}
	div.ms-webpart-chrome-title {
		display: inline;
	}
	div[data-name="WebPartZone"]{
		display: inline;
	}
	div.ms-webpart-chrome {
		display: block;
		width: auto !important; /* TODO remove !important after removing inline style */
	}
	.container #HolderMain .ms-WPBody {
		width: auto !important; /* TODO remove !important after removing inline style */
	}
	.container #HolderMain .dfwp-list {
		background: none;
		z-index: 9999;
		position: relative;
	}

/* ============================================================================
	Module Customer stories
   ========================================================================= */
	.BU-customer-cases{
		display: none;
	}
	.box-100 .box-66 div.image-area-left {
		width: auto;
		margin: 0 10px 10px 0;
		float: left;
	}
	.image-area-left .ms-webpart-cell-vertical p{
		margin: 0;
	}
	.image-area-left img{
		float: left;
		width: 120px;
	}
	.box-66.border-right {
		border-right: none;
		width: auto;
		padding : 0;
		margin-bottom: 0;
	}
	.box-66.border-right > .hd {
		display: inline;
	}
	.box-66.border-right > .bd {
		display: inline-block;
		padding: 0px 0 0;
		width: 100%;
	}
	.box-100 > .box-33:last-child, .box-100 > .box-33.last {/
		margin: 0 0 0 2%;
		width: auto;
		height: 30px;
		padding: 0 0 10px 0;
	}
	.box-33.last > .bd > p {
		float: left;
	}
	.ms-webpart-cell-vertical .bd  > p{
		margin : 0 !important; /* TODO remove !important after removing it from modules.css (.ms-webpart-cell-vertical p) */
	}
	
/* ============================================================================
	Module Highlights
   ========================================================================= */
	div.highlight {
		width: 93%;
	}

/* ============================================================================
	Block subscribe
   ========================================================================= */
	div#subscribe-container {
		display: inline-block;
		width: 98%;
		height: 80px;
		margin: 5px;
	}
	div#subscribe-container  iframe{
		margin: 0 -5px;
	}
	#subscribe-container div#subscribe-img > img{
		width: 60px;
		margin: 0 5px 10px;
	}
	#subscribe-container div#subscribe-title{
		width: 75%;
	}
	#subscribe-container div#subscribe-title > p{
		padding: 0;
	}
	div#subscribe-social{
		margin:40px 20px 0;
		float: left;
		width: auto;
		height: 80px;
	}
	div#subscribe-social b.social-follow {
		padding: 0;
	}
	div#subscribe-social div.social-icons {
		margin: 14px 15px 0 0;
	}

/* ============================================================================
	Intro
   ========================================================================= */
	div.intro, div.home-intro {
		display: table;
		margin-left: -10px;
		margin-right: -10px;
		margin-bottom: 30px;
		padding: 100px 10px 5px;
		background-position: center top;
		margin-top:0px;
		padding-top:0px;
	}
	div.home-intro {
		background: url("/_catalogs/masterpage/Gemalto/assets/responsive-home-solutions_768.png") no-repeat scroll center -20px rgba(0, 0, 0, 0);
	}
	div.intro div.shadow,
	div.home-intro div.shadow{
		display: none;
	}
	div.intro > div.intro-cta-text-aligned {
		float: none;
		display: table-footer-group;
	}
	div.intro > div.intro-cta-text-aligned > a {
		display: inline-block;
		text-align: center;
		width: 100%;
	}
	div.home-intro div.home-section-list {
		float: none;
		margin: 0 auto;
		padding: 0 15px 18px;
		width: 200px;
		height: 272px;
	}
	
	div.home-intro div.home-section-list ul.col-1,
	div.home-intro div.home-section-list ul.col-2 {
		float: none;
		width: 100%;
	}
	div.home-intro div.home-section-list p.intro-all-brands {
		width: inherit;
	}
	div.home-intro > h1.hd {
		display: table-caption;
		margin: 40px auto 20px;
		width: 85%;
	}
	div.home-intro > div.bd {
		width: 100%;
		display: table-header-group;
	}

	
/* ============================================================================
	Module Get inspired
   ========================================================================= */
	div.box-black-100 {
		width : 100%;
		padding: 0;
		min-height: inherit;
	}
	div.box-black-100 > img {
		width: 40%;
		height: 100%;
		position: relative;
		margin: 0;
	}
	div.box-black-100  > h3.hd{
		display: inline-block;
		font-size: 22px;
		margin: 0;
		padding: 10px;
		width: 53%;
	}
	div.box-black-100  > div.bd > p:first-child{
		display: none;
	}
	div.box-black-100 > .bd a {
		bottom: 0;
		opacity: 0;
		padding: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9999;
	}
	
/* ============================================================================
	Module Solutions : 
	Financial BU, Transport BU, Identity & Access BU, M2M BU
   ========================================================================= */
	div.box-solution-100{
		display: inline-block;
		background-image: none !important; /* Remove !important after removing inline style (m2m) */
	}
	div.box-solution-100 img{
		display: none;
	}
	div.box-solution-100 .gto-item img{
		display: block;
	}
	div.box-solution-100 div.box-25,
	div.box-solution-100	div.box-33,
	div.box-solution-100	div.box-50,
	div.box-solution-100 div.box-inline,
	div.box-solution-100	li.gto-item {
		width: 100% !important; /* Remove !important after removing inline style (mobile)*/
		margin: 0;
		padding: 0;
	}
	div.box-solution-100 h3.hd {
		font-size: 25px;
		line-height: 30px;
	}
	
/* ============================================================================
	Module Solutions : 
	Mobile BU, Identity & Access BU
   ========================================================================= */
	div.box-solution-100	li.gto-item  .category {
		float: right;
		width: 70%;
		margin-top: 5%;
	}
	div.box-solution-100	li.gto-item  .image {
		float: left;
		width: 30%;
	}
	div.box-solution-100	li.gto-item  .image  > img{
		width: 100%;
	}
	div.box-solution-100	li.gto-item  .desc {
		width: 70%;
	}
	div.box-solution-100	li.gto-item  .link {
		display: inline-block;
	}
	
/* ============================================================================
	Module Blog
   ========================================================================= */
	div.box-100.highlight div.image-area-left{
		width: 120px;
	}
	div.box-100.highlight {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	div.box-100.highlight .bd > p {
		display: none;
	}
	
/* ============================================================================
	Partners page
   ========================================================================= */
	div.sub-content {
		width: auto;
		float: none;
	}
	div.sub-content div.partner-header div.logo {
		max-width: 100%;
		margin-bottom: 30px;
	}
	div.sub-content div.partner-header div.info {
		float: right;
		margin: 5px 0;
		font-size: 12px;
		width: 100%;
	}
	div.sub-content div.partner-header .info p strong {
		width: 100px;
	}
	div.sub-content div.partner-header .info p span {
		width: auto;
	}
	div.sub-content div.article-content {
		clear: both;
	}
	
	/* Partners locator */
	div#FacetedTable {
		width: auto;
		z-index: 9999;
		position: relative;
	}
	div#FacetedTable div.criteriaCol {
		width: 32%;
	}

	div#FacetedTable div.filterByCriteria	{
		width: 100%;
	}
	div#FacetedTable div.filterByCriteria {
		margin-bottom: 20px;
	}
	div#FacetedTable div.searchTitleRow {
		margin-bottom: 0;
	}
	div#divLblCriteria1, 
	div#divLblCriteria2,
	div#divLblCriteria3 {
		position: relative;
		top: -2px;
	}
	/* responsive faceted table; gain vertical space*/
	div#FacetedTable #containerCriteria{
		margin-bottom:-40px;
	}

	
	div.box-partner .partnersrow {
		width: auto !important;
		margin: 0;
	}
	div.box-partner .partnersrow.title {
		display: block;
	}
	div.box-partner .partnersrow.partner:before ,
	div.box-partner .partnersrow.market:before{
		content: ", ";
	}
	div.PartnerRow {
		display: none !important;
	}
/* ============================================================================
	Container - reducing padding
   ========================================================================= */
	div.container {
		padding: 0 10px;
	}
	
/* ============================================================================
	Header Banner
   ========================================================================= */
	div#js-header-home-boxes {
		margin: 0;
		overflow: hidden;
		padding: 10px 20px;
		width: 240px;
		background-color: #fff;
		border-radius: 0 15px 15px;
	}
	div#js-header-home-boxes > div.items  div.header-home-box {
		margin-right: 40px;
		width: 240px;
	}
	div#js-header-home-boxes > div.items  div.header-home-box h1.hd {
		font-size: 22px;
		margin: 0 0 5px;
		line-height : 30px;
	}
	div#js-header-home-boxes > div.items  div.header-home-box div.bd  > p{
		display: none;
	}
	div#js-header-home-boxes > div.items  div.header-home-box div.bd  p:last-of-type{
		display: block;
	}

/* ============================================================================
	HTML Block home page
   ========================================================================= */	
	div.footer-home div.section:first-child > div {
		min-width: 300px;
		width: auto;
		margin-bottom: 5px;
	}
	div.footer-home div.footer-downloads {
		background-position: center bottom;
	}
	div.footer-home .section > div.footer-downloads {
		background: none;
	}
	#home-scrubber {
		display : none;
	}
	
/* ============================================================================
	Responsive tabs
   ========================================================================= */	
  ul.tabs-headings {
	display: none;
  }
  .tabs h2 {
	display: block;
  }
  ul.tabs-items {
    border: 1px solid #c1c1c1;
    border-top: 0px;
  }
  
/* ============================================================================
	Menu
   ========================================================================= */
	div.topbar {
		height: 25px;
	}
	div.topbar nav  {
		width: 100%;
		margin: 0 0 -25px 0;
	}
	div.topbar nav  li > a.arrow-right{
		font-size : 11px;
	}
	div.topbar li {
		padding: 0 6px;
	}
	/* remove the newsletter subscription link */
	div.topbar li:first-child {
		display: none;
	}

	.topbar nav ul {
		padding: 0px 0px 10px 0px;
	}
	
	.header-logo {
		float: right;
		margin-top: 0;
		position: relative;
		z-index: 99999;
		margin-bottom: 20px;
	}
	header .container nav {
		left: -240px;
	}
	header .container #responsive-menu-header, 
	header .container .responsive-menu-button {
		display: inline-block;
	}
	header .container ul#responsive-menu-header {
		position: absolute;
		z-index: 9999;
		margin: 0 5px;
		padding: 0;
	}
	header .container .responsive-menu-button{
		height: 45px;
		width: 45px;
		background: rgba(0,0,0,0);
	}
	
	header .container ul#responsive-menu-header li.responsive-menu-button{
		margin: 0 5px;
	}
	header .container div#responsive-menu-close {
		margin: 0 97px;
		position: fixed;
	}
	header .container #js-header-nav a, header .container nav .back a{
		display: inline-block;
		padding: 4px 10px 4px 25px;
		margin: 0 0 0 5px;
		width: 83%;
	}
	header .container #js-header-nav a{
		background: url("/_catalogs/masterpage/Gemalto/assets/icons.png") no-repeat scroll 0 -135px;
	}
	header .container #js-header-nav a.selected{
		background: url("/_catalogs/masterpage/Gemalto/assets/icons.png") no-repeat scroll 0 -533px;
		color: #000000;
	}
	header div.container nav #js-header-nav .back > a{
		background: url("/_catalogs/masterpage/Gemalto/assets/arrow_back.png") no-repeat scroll 5px 18px / 13px 9px rgba(0, 0, 0, 0);
	}
	
	header .container nav ul#js-header-nav,
	header .container nav ul.nav-sub {
		padding: 0;
		position: fixed;
		width: 240px;
		font-size: 18px;
		margin: 0;
		top: 105px;
	}
	header .container nav ul#js-header-nav  li, 
	header .container nav ul.nav-sub, 
	ul.new-sub-nav, 
	nav .back {
		background: #FFFFFF;
		float: none;
		border: none;
		border-bottom: 1px solid #F6F6F6;
		min-height: 35px;
		line-height: 32px;
		padding: 0;
		overflow: visible;
		width: 240px;
	}
	header .container nav ul.nav-sub,
	header .container nav ul.new-sub-nav, nav .back {
		position: absolute;
		margin: 0;
		padding: 0;
		top: 0;
		left: 240px;
		width: 240px;
		overflow: visible;
		font-size: 18px;
	}
	header .container nav .back {
		background: #454545;
		display: none;
		left: 0;
		padding: 0;
		position: fixed;
		top: 170px;
	}
	header .container nav ul.nav-sub .back, 
	header .container nav ul.new-sub-nav .back {
		position: relative;
		top: 0;
	}
	header div.container nav .back a,
	header div.container nav ul#js-header-nav .back a,
	header div.container nav ul#js-header-nav .back a:hover{
		color: #FFFFFF;
		text-decoration: none;
		cursor: pointer;
	}
	nav.sub-navigation{
		display : none;
	}
	
	/* search field */
	div.topbar div.search-box {
		left: 0;
		position: absolute;
		top: 105px;
		width: 100%;
		z-index: 9999;
		display: none;
	}
	div.topbar div.search-box > input {
		background: none repeat scroll 0 0 #F4F4F4;
		font-size: 15px;
		width: inherit;
		padding: 15px 0 15px 0;
		text-indent: 15px;
	}
	div.topbar div.search-box:after {
		border-bottom: 13px solid #F4F4F4;
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		content: "";
		height: 0;
		left: 95px;
		position: relative;
		top: -82px;
		width: 0;
	}
	
  /* ============================================================================
	Sticky menu
   ========================================================================= */
	header div.header-sub{
		background: none;
		display: inline-table;
		height:100% !important;
		margin-top:3px;
		
	}
	header div.header-sub{
		display: inline-block;
		position: relative;
	}
	header div.header-sub div.nav-tabs {
		margin: 0;
	}
	header div.header-sub div.nav-tabs li {
		float: left;
		margin: 0 0 3px;
		padding: 0;
	}
	
	/* Contact Form */
	#contactFormContainer .footer-contact-text {
		width: auto;
	}
	header .container #js-header-nav {
		overflow: auto;
	}
	/* Preference Center */
  iframe#prefCenter {
    height: 2550px;
  }
	/* PR */
	img.ms-rtePosition-2{
		margin: 5px 0 0px 10px !important;
		max-width: 100%;
	}
	
	/* M2M Markets */
	.sub-content > h1 {
		clear: both;
		margin : 0.5em 0;
	}
	ul.protiva-list img {
		margin: 0 !important;
	}
	li.protiva-list-item {
		display: inline-table;
		margin-bottom: 10px;
		height: auto !important;
		padding: 10px;
	}
	li.protiva-list-item h3.hd {
		padding-top: 0px;
		margin-top: 0;
	}
	/* M2M articles */
	.article-content > img {
		width: 100%;
		height: auto;
	}
	
	/* Page careers */
	.article-content .box-33.no-padding {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	.article-content .box-33.no-padding img {
		width: 100%;
		height: auto;
	}
	.article-content .box-33.no-padding .bd {
		font-size: 14px;
		width: auto;
		margin: 0;
	}
	.article-content .box-50 {
		width: auto;
	}
	
	/*video teaser : remove float behavior => text displayed below (defect #29)*/
	img.left{
		float:none !important;
	}
	
	/*remove float behavior on small devices */
	.disable-float-responsive{
		float:none !important;
	}

	iframe.subscribe{
	height: 300px;
	}
}

/* specific to chrome and safari */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 980px){
    header .container nav ul#js-header-nav,
	header .container nav ul.nav-sub {
		margin: 0px 1px 0;
	}
	
	
	div.topbar div.search-box:after {
		top: -78px;
	}
}