/* #Animation
===========================================================================================   */

	#topnavi a {
		-webkit-transition: background .3s ease-in-out;
		-moz-transition: background .3s ease-in-out;
		transition: background .3s ease-in-out
	}
	input, textarea,  header .logo   {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}

/* #Page Styles
===========================================================================================   */
	
	.container {
		width: 980px ;
		margin: 0 auto;
		padding: 0;
		text-align: left;	
		position: relative;
	}
	header { width: 980px ; }
	
	.main {
		position: relative;
	}

    #menu   {
        position: absolute;
        top:40px;
        right:0;
        cursor: pointer;
        display: none;
    }
	
	header {
        float: left;
        padding: 30px 0;
        box-sizing: border-box;
	}
	header .logo,
	header .logo2,
	footer .logo  {
		text-indent: -9000px;
		background: url(../../_img/layup/pcm-logo.png) no-repeat;
        background-size: contain;
		margin: 0;
		width: 300px;
		height: 120px;
		float: left;
		outline: 0;
	}
	header .logo2 {
		background-image: url(../../_img/layup/pcm-logo.png);
	}
	
	.fixhead {
		margin-top: 30px;
	}
	
	.fixhead header {
		position: fixed;
		z-index: 99999;
		float: none;
		margin: 0;
		top: 0;
		padding: 10px 0;
		background: #fff;
	}
	.fixhead header #topnavi {
		margin: 15px 0 0 0;
	}
	
	.fixhead header .logo, .fixhead header .logo2 {
		width: 150px;
		height: 60px;
	}
	
	.fixhead header #menu {
		top: 20px;
		right: 0;
	}
	
	
	
    .flags   {
        float: right;  
        margin:6px 15px 0 0;
    }
    .flags a    {
        float: left;
        margin:0 0 0 5px;
        transition:0.3s opacity ease;
    }
    .flags a:hover    {
        opacity: 0.8;
    }

    #topnavi    {
        float: right;
        clear: right;
        margin:40px 0 0 0;
        padding:0;
    }
    #topnavi li {
        list-style: none;
        display: inline;
        float: left;
    	position: relative;
    }

    #topnavi li a   {
        font-family: "astoria-sans";
	    font-weight: 300;
	    font-size: 16px;
        color: #303030;
        float: left;
        clear: left;
        transition:0.3s all ease;
        border-radius: 4px;
        font-size: 16px;
        padding: 5px 7px;
        margin: 0;
    }
    #topnavi a.is-open,
	#topnavi a:hover,
    #topnavi  li:hover > a,
    #topnavi a.on {
        background:#21438a;
        color:#fff;
    }
    
    
    
    #topnavi ul li {
	    float: none; 
    }
    #topnavi ul a {
    	display: block;
    	color: #fff;
    	white-space: nowrap;
    	float: none;
    }
    #topnavi ul a:hover{
    	background: #000;
    }

    .home-banner    {
        float: left;
        width:100%;
        position: relative;
    }
    .home-banner img    {
        float: left;
        width:100%;
    }
    .home-banner h2 {
        position: absolute;
        bottom:0;
        right:0;
        text-align: right;
        font-size: 60px;
        line-height: 70px;
        font-family:Arial, Helvetica, sans-serif;
    }

    .home .main,
    .full-w .main,
    .full-w .main   {
        float: left;
        width:100%;
        padding:30px 0;
    }
    .home .main h4   {
        margin-bottom:30px;   
    }
    .main img   {
       
    }
    .main img:last-child   {
        margin-right:0;   
    }
    .main p {
        line-height: 1.3;  
        float: left;
        clear: both;
        width:100%;
        text-align: justify;
    }
    .main ul,
    .main ol    {
        margin:10px 0;
        padding:0;
        float: left;
        clear: both;
        width:100%;
    }
    .main ul li,
    .main ol li{
	    line-height: 1.3; 
        margin:0 0 10px 30px;  
        clear: both;
    }
    .main .full-img {
        width:100% !important;
        margin:10px 0 !important;
    }
    .main a    {
        font-family:Arial, Helvetica, sans-serif;
        text-decoration: underline;
    }
/*
    .main h1    {font-size: 38px;}
    .main h2    {font-size: 32px;}
    .main h3    {font-size: 26px;}
*/

    .img-area {
        float: left;
        width: 100%;
        margin: 0px 0px 40px;
    }
    .img-area div {
        float: left;
        margin: 0px 1%;
        width: 48%;
    }
    .img-area img {
        float: left;
        width: 100%;
    }
	
	
	img[usemap], map area {outline: none;}
	

	
	
	#hero {
		clear: both;
		height: 327px;
		margin: 0 0 30px 0;
		background: #fff;
        position: relative;
        overflow: hidden;
	}
  

  
  #herovideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

	#imgholder { height: 327px;}
	#slideimages { position:relative; margin: 0; padding: 0; height: 327px; }
	#slideimages li{ position:absolute; z-index:0; margin: 0; padding: 0; list-style: none; width:100%; }
	#slideimages li.previous { z-index: 1; }
	#slideimages li.active { z-index: 2; }
    #slideimages li span    {
        position: absolute;
        top:20px;
        right:0;
        text-align: right;
        font-size: 60px;
        line-height: 70px;
        font-family:Arial, Helvetica, sans-serif;
        background: rgba(255,255,255,0.9);
        padding:10px;
        width:50%;
    }
    #slideimages span p {
        margin:0;   
        color:#21438a;
    }
    
	
	#slideimages img   {
        display:block;
        width:100%;
    }
	.json #slideimages { display: none;} 

	
    #leftside   {
        float: left;
        width:23%;
        margin:0 2% 0 0;
        padding:0;
    }
    #leftside li    {
        list-style: none;   
        display: block;
    }
    #leftside li a  {
        float: left;
        clear: both;
        width:94%;
        padding:10px 3%;
        color: #303030;
        border-left:4px solid transparent;
        transition:0.3s all ease;
    }
    #leftside li a:hover,
    #leftside li .on    {
        background:#f9f9f9;
        border-left:4px solid #21438a;
        color: #222;
    }

    #leftside li ul {
        display: none;
    }

    #leftside li ul.on {
        display: block;
    }
    
    .subnavi {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 20px 0;
      padding: 0;
      list-style: none;
    }
    
    .subnavi li {
      margin: 0;
    }
    
    .subnavi a {
      display: inline-block;
      padding: 8px 16px;
      background: #4e67ac;
      color: #fff;
      text-decoration: none;
      border-radius: 999px; 
      font-size: 14px;
      transition: 0.2s ease;
    }
    

    .subnavi a:hover {
      background: #b7c263;
    }


    .subnavi a.on {
      background: #b7c263;
    }

    .main   {
        float: right;
        width:73%;
        margin-bottom:20px;
    }
    .threesixty.car { margin-bottom: 30px }

    #submenu    {
        color:#fff;
        border:1px solid #1f478e;
        width:auto;
        float: left;
        padding:6px;
        margin:0 0 10px 0;
        border-radius: 4px;
        background:#1f478e;
        cursor: pointer;
        display: none !important;
    }

    .productgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .productgrid .item {
      padding: 15px;
    }
    
    .productgrid .item img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .productgrid .item h2 {
      text-align: center;
    }
    
    
    .productgrid .item {
      box-sizing: border-box;
    }
    
    
    @media (max-width: 800px) {
      .productgrid {
        grid-template-columns: 1fr;
      }
    }


    #gmap   {
        clear: both;
        width:100%;
        height:400px;
		margin-bottom: 20px;
    }
    #gmap h2    {
        font-size: 22px;
    }
    #gmap p {
        font-size: 14px;
        line-height: 20px;
    }

	.bubble {
    text-align: left;
width: 300px;
margin-top: 20px;
}

.bubble a {
    position: static;
    display: block;
    text-align: center;
    background: #222f5c;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 0;
	width: 200px;
    margin: 20px auto 10px;

  border-radius: 50px;
}

.bubble a:hover {
    background: #000;
}

.gm-style .gm-style-iw {
  overflow: hidden !important;
  max-height: none !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  max-height: none !important;
}

.gm-style-iw-chr {
position: absolute;
right: 0;
}

    .news-article   {
        float: left;
        clear: both;
        width:100%;
        border-bottom: 1px solid #ccc;
        margin:0 0 15px 0;
    }
    .news-article:last-child    {
        border: none;   
    }
    .news-article a {
        text-decoration: none;   
    }
    .news-article h4    {
        margin:0 0 15px 0 !important;   
    }
    .news-article .btn  {
        background:#21438a;
        color:#fff;
        border-radius: 3px;
        padding:7px;
        transition:0.3s all ease;
    }
    .news-article .btn i {
        font-size: 13px;
    }
    .news-article .btn:hover    {
        background: #333;   
    }


       /* Image scroller
    ===========================================================================================   */	
    .imggal {
      margin: 40px -12px 20px;
      padding: 0;
      display: flex;
      overflow-x: auto; 
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch; 
      scroll-behavior: smooth;   
    }
    
    .imggal li {
      width: calc(25% - 24px);
      min-width: 250px; 
      margin: 0 12px 0;
      list-style: none;
      overflow: hidden;
      box-sizing: border-box;
      flex: 0 0 auto;
    
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .imggal li:hover {
      border-color: #000;
    }
            
    .imggal li img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
      
      
    .scroll-left,
    .scroll-right {
      text-decoration: none;
      margin-left: 10px;
      margin-bottom: 20px;
      
    }
    .scroll-left:after,
    .scroll-right:after {
      content: '\f053';
      font: normal 18px/1 'Font Awesome 5 Pro';
      color: #2e6abd;
    }
    
    .scroll-right:after {
      content: '\f054';
    }
    
    .scroll-left b,
    .scroll-right b { display: none}
    

   /* Footer
===========================================================================================   */	

	

	footer {
		clear: both;
		margin: 50px 0 0 0;
		padding: 30px 0 20px; 
		background: #f7f7f7;
		color: #383838;
		overflow: hidden;
		font-size: 16px;
	}
	
	footer .container {
		overflow: hidden;
	}
	
	footer ul{
		margin: 0 0 20px;
		padding: 0;
		text-align: left;
		float: left;
		width: 400px;
	}
	footer ul li{ 
		width: 50%;
		margin: 0 0 5px;
		padding: 0;
		list-style: none;
		float: left;
	}
	footer ul li a{
		color: #383838;
		text-decoration: none;	
		
	}
	footer ul a:hover {
		text-decoration: none;
		color: #000;
	}
	footer ul ul { display: none}

	footer span {
		float: right;
	}
	footer p {
		margin: -40px 60px 10px 0;
	}
	
	.social {
		clear: left;
	    margin: 0;
	    padding: 0
	}
	
	.social li {
	    margin: 0 3px 0 0;
	    padding: 0;	    
	    border-radius: 5px;
		background: #fff;
		border: 1px solid #d0d0d0;
	    text-align: center;
	    list-style: none;
	    float: left;
	}
	
	.social li a:before {
	    color: #3d69b7;
	    padding: 2px 5px 2px;
	    font: normal 14px / 20px 'Font Awesome 5 Pro';
	}
	
	.social li a.s1:before {
	    content: '\f0e0';
	}
	
	.social li a.s2:before {
	    content: '\f879';
	}
	
	.social li a.s3:before {
	    content: '\f007';
	}
	
	.social li a.s4:before {
	    content: '\f0e1';
	    font-family: 'Font Awesome 5 Brands'
	}
	
	.social li a.s5:before {
	    content: '\f2f5';
	}
	
	.social li a {
	    font-size: 0;
	    text-decoration: none;
	}
	
	.social li:hover {
	    border-color: #000;
	}
	
	footer .logo { 
		float: right;
 		mix-blend-mode: multiply; 
		margin: 0 60px 10px 0;
	}
	
	footer .right p { float: right; clear: right; }
	

	
	
	.map-area {
		float: left;
        width: calc(50% - 20px);
        margin: 0 10px;
	}
    #map,
    #map2,
    #map3,
    #map4    {
     
        height:400px;
    }

    .map-area article   {
        margin:20px 0 0 0;
    }
     .map-area article  p {
	     float: none;
	     width: auto;
	     clear: none;
     }






#search {
    float: right;
    margin:0;
    position: relative;
    display: none;
}
#search input   {
    width:240px;
    padding:8px 5px;
}
#search button  {
    position: absolute;
    right:0;
    top:-1px;
    padding:10px 0 9px 0;
    width:50px;
}


/* Introduction Page
===========================================================================================   */

.intropage {
    margin: 40px -12px 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.intropage li {
    width: calc(25% - 24px);
    margin: 0 12px 35px;
    padding: 0;
    list-style: none;
    overflow: hidden;
    float: left;
    position: relative;
}


	
	.intropage {
		margin: 0;
		padding: 0;
	}
	.intropage li {
		margin: 0 0 10px;
		padding: 0 0 10px;
		list-style: none;
		clear: left;
		border-bottom: 1px solid #c5c7c9;	
	}
	.intropage h2  {
		margin: 0;
		padding: 0;
	}
	.intropage span {
		float: right;
		color: #acacac;
	}
	.intropage img {
		float: left;
		margin: 0 10px 0 0
	}
	.intropage p  {
		margin: 10px 0 0 0;
		min-height: 45px;
	} 


.intro_agents {
      float: left;
    }
    
   .intro_agents li {   
     width: 100%;
     border: none;
     list-style: none;
     margin-bottom: 2px;
     
   }

.intro_agents li {
      
      width: calc(33.33% - 30px);
      border-bottom: 0;
  }
  
  .intro_agents .top {
      background: #fff;
      padding-bottom: 10px;
    text-align: center;
  }
  
  .intro_agents li div {
    display: block;
    width: 100%;
    background-size: 60% auto;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: calc(60% - 40px);
  
  }
  
  .intro_agents li h3 {
      text-align: center;
      margin-top: 20px;
  }
  .intro_agents li {
    border-right: 30px solid #fff;
    text-align: center;
  }
  .intro_agents li:last-child {
    border-right: none;
  }
  .intro_agents li .details {
      font-size: 17px;
      padding: 20px 30px 10px;
      border-radius: 30px;
      background: #f7f7f7;
      width: 200px;
      margin: auto;
      text-align: left;
  }
  .intro_agents li strong { font-weight: 700}


.intro_products li {
    width: calc(50% - 24px);
	border: none;
	background: none;
	text-align: center;
	margin-bottom: 40px;
	padding-top: 10px;
  
}
.intro_products li .details {
	text-align: center;
	background: #4768b1;
	border-radius: 50px;
	width: 35%;
	margin: 0 auto;
	padding: 10px 10px 10px;
}
.intro_products li:hover .details {
	background: #b4c252;
}

.intro_products li .details h2 {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: normal;
}
.intro_products li .details a {
	color: #fff;

}
.intro_products .top {
	text-align: center;
  padding-bottom: 30px;
}

.intro_products li div {
	width: 60%;
	padding-bottom: calc(60% - 40px);
	background-size: 80% auto;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 100%;
	margin: 0px auto 20px;
	border: 3px solid rgb(255, 255, 255);
	filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 5px 10px);
	background-color: rgb(255, 255, 255);
}
	
	
	/* Standard CMS */
	
	.docs {
		margin: 0 0 0 20px;
		padding: 0;
	}
	.docs li{
		clear: left;
		list-style: none;
	}
	.docs a{
		padding: 5px 0 5px 22px;
		background: url(/_img/layup/docs.gif) no-repeat 0 -82px ;
		float: left;
	}
	.docs span{
		float: left;
		padding: 5px 0 5px 22px;
		color: #999;
	}
	
	.xls, .xlsx { background-position: 0 4px !important;}
	.pdf { background-position: 0 -125px !important;}
	.doc, .docx { background-position: 0 -39px !important;}
	
	#sitemap,
	#sitemap ul{
		margin: 0;
		padding: 0 0 0 20px;
		
	}
	#sitemap  a {
		display: block;
		text-decoration: none;
		font-weight: bold;
		color: #666;
		padding: 2px 0 2px 18px;
	}
	#sitemap  a:hover { 
		color: #000;
	}
	#sitemap ul a {
		color: #53107f;
	}
	#sitemap ul a {
		font-weight: normal;
	}
	#sitemap li {
		border-left: 1px solid #CDCDCD;
		background: url(/_img/layup/sitemapli.gif) no-repeat 0 .5em;
		list-style: none;
	}
	
	.paging {
		float: right;
		margin: 0;
		padding: 15px 0 0;
	}
	.paging li {
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.paging li a {
		display: block;
		margin: 0 0 0 1px;
		padding: 2px 0;
		width: 20px;
		text-align: center;
		text-decoration: none;
		color: #666;
		background: #eaeaea;
		line-height: 1.3em;
	}
	
	.paging li a:hover, .paging li .on{
		background: #363636;
		color: #fff;
	}
	
	.paging .next a, .paging .last a, .paging .back a, .paging .first a {
		padding: 2px 7px !important;
		width: auto !important;
	}
	.pagenumbers {
		float: left;
		padding-top: 15px;
	}
	
	#cmsForm {
        float: right;
        text-align: center;

	}
    .formarea {
      width: 50%;
      min-width: 400px;
      margin: 0 auto;
      text-align: left;
    }
	#cmsForm button{
		float: right;
	}
	.contactCheck {
		position: absolute; 
		left: -9999px;
	}
    #cmsForm p  {
        clear: none;
        margin:10px 1% 10px 0;
    }
    #cmsForm .error {
        width:100% !important;   
    }
    #cmsForm .last  {
        width:99%;
        clear: both;
    }
    #cmsForm #submitButton  {
        clear: both;
        width:99%;
    }
    #cmsForm label{ 
      display: none;
    }
	
	/* Extras */
	
	.hidden {
		position: absolute; 
		left: -9999px; 
	}
	.hand {
		cursor: pointer;
	}
	.textleft {
		text-align: left !important;
	}
	.textcenter {
		text-align: center !important;
	}
	.textright {
		text-align: right !important;
	}
	.right {
		float: right;
	}
	.left {
		float: left;
	}
	
	
	/* text editor css */
	
	.highlight {
		color: #21438a;
		font-family:Arial, Helvetica, sans-serif;
	}
	
	.imgleft,
	.imgright {
		border: 1px solid #d7d7d7;
			
			-webkit-box-shadow: 2px 2px 2px #f3f3f3;
			-moz-box-shadow: 2px 2px 2px #f3f3f3;
		box-shadow: 2px 2px 2px #f3f3f3;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
		border-radius: 2px;	
	}
	.imgleft {
		margin: 0 10px 10px 0; 
		float: left;	
	}
	.imgright {
		margin: 0 0 10px 10px; 
		float: right;	
	}

    .results div    {
        border-bottom:1px solid #ccc;
        margin:0 0 15px 0;
    }
    .results div:last-child {
        border: none;   
    }

    .table-container    {
        float: left;
        width:100%;
    }
    .col1  {
        float: left;
        width:28%;
        margin-right:2%;
        clear: both;
    }
    .col1 img   {
        margin:0 !important;
        max-width:100%;
    }
    .col2  {
        float: left;
        width:54%;
        clear: none;
    }
    .col1 tr, .col2 tr    {
        background: none;   
    }
    .col1 td, .col2 td  {
        border: none;   
    }
    
    #historytab td{
	    border: none;
	    background: none;
    }
    #historytab tr:nth-child(odd) {
	    background: none;
    }
    #historytab tr td:first-child {
	    width: 80px;
    }
    #historytab p {
	    margin-bottom: 0;
    }
	
	
	/* Timeline */
	
	
	#timeline {
		margin: 0;
		padding: 0;
		width: 100%;
		min-height: 1400px;
	}
	
	#timeline:before { 
		content: '';
		position: absolute;
		border-right: 2px solid #1f478e; 
		height: 100%;
		width: 100%;
		transform: translateX(-50%);
		z-index: -1;
   }
	
	#timeline li{
		list-style: none;
		margin: 0;
		padding: 0;
		display: block;
		width: 50%;
		height: 100px;
		float: right;
	}
	#timeline li:nth-child(even) { float: left}
	
	
	#timeline span {
		width: 61px;
		height: 61px;
		line-height: 61px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border: 2px solid #1f478e; 
		display: block;
		text-align: center;
		background: #fff;
		margin-left: -32px;
	}
	
	#timeline li:nth-child(even) span { 
		margin-right: -33px;
		float: right;
	}
	
	#timeline li div {
		margin-top: -30px;
	}
	
	#timeline li:nth-child(even) div {
		margin-top: 30px;
	}
	
	#timeline li div:before { 
		content: '';
		position: absolute;
		border-bottom: 2px solid #1f478e; 
		width: 50%;
		z-index: -1;
   }
   
   #timeline li section {
	   background: #1f478e;
	   width: 35%;
	   right: 0;
	   min-height: 70px;
	   margin: -50px 0 0 64px;
	   padding: 20px;
	   color: #fff;
	   position: absolute;
	   font-size: 15px;
	   -webkit-border-radius: 13px;
	   -moz-border-radius: 13px;
	   border-radius: 13px;
   }
   #timeline li:nth-child(even) section { 
	   margin: -50px 64px 0 0; 
	   left: 0;
   }
   #timeline p {
	   line-height: 1.2;
	   margin: 0;
	   text-align: left;
   }
  
   
   
   #timeline h3 {
	   font-size: 17px;
	   color: #fff;
	   margin: 0 0 4px;
	   line-height: 1;
   }
	
	
	
	

/* #Firefox Styles
===========================================================================================   */

	@-moz-document url-prefix() {
	
	}	
		
	
/* #IE Styles
===========================================================================================   */

	.ie8 header .logo,
	.ie7 header .logo{
		background: url(/_img/layup/logo.gif);
	}
		
	

/* #Media Queries
===========================================================================================   */



/* up to 960 to 1200
===========================================================================================   */
@media only screen and (min-width: 1200px)  {
	
	.container, header  { width: 1200px; }
    
    #hero {height: 400px;}
    #hero:has(video) {
     height: 600px;
    }

	#imgholder { height: 400px;}
	#slideimages { height: 400px;}
    #slideimages li span    {top:70px;}
    
    .col2  {width:63%;}
    
    #topnavi li a {
        font-size: 18px;
        margin: 0 2px;
        padding: 5px 10px;
	}

	.b_home #hero,
	.b_home #slideimages { height: 700px ;margin-bottom: 0}
}

/* Tablet Portrait size to standard 960 (devices and browsers)
===========================================================================================   */
@media only screen and (min-width: 768px) and (max-width: 959px)  {
	
	.container, header  { width: 90%; }
    
 
    .home-banner h2 {
        line-height: 50px;   
    }
    
    #hero {height: 256px;}

	#imgholder { height: 256px;}
	#slideimages { height: 256px;}
    
    #slideimages li span    {
        font-size: 40px;
        line-height: 45px;
        top:55px;
    }
    
    #cmsForm p,
    #cmsForm .last,
    #cmsForm #submitButton   {
        margin:10px 0;
        width:100%;
    }
    
    .flags   {
        float: left;
        clear: both;
        text-align: center;
        margin-top:25px;
        width:100%;
    }
    .flags a    {
        float: none;
        margin:0 0 0 2px;
        transition:0.3s opacity ease;
    }
    
    #search {
        float: left;
        margin-left:255px;
        margin-top:15px;
    }
    #search button  {
        top:0;   
    }
    
    .col2, .col1  {width:100%;}
    
    .map-area   {
        width:100%;
        margin:0 0 20px 0;
    }
	
}

/* Ash changes for task #1294 */
@media screen and (min-width: 960px) {
 

    #topnavi ul {
        display: none;
        position: absolute;
        top: 27px;
        left: 2px;
        z-index: 999999;
        background: #21438a;
        margin: 0;
        padding: 5px 0;
        width: auto;
    }

    #topnavi li a {
        clear: none;
    }
}


/* All less than 959
===========================================================================================   */
@media only screen and (max-width: 959px)  {
	
    header .logo    {
        width: 50%;
    }
 
    
    
    #menu  {
        display: block !important;   
    }
    #menu i {
        color:#000; 
        font-size: 28px;
    }
    .slideout   {
        left:0 !important;
    }
    #topnavi    {
        position: fixed;
        left:-80%;
        top:0;
        margin: 0 !important;
        padding:0;
        width:70%;
        background:rgba(0,0,0,0.95);
        height:100vh;
        z-index: 999;
        transition:0.3s all ease;
    }
    #topnavi li {
        width:100%;   
        margin:0 0 10px 0;
        padding: 0;
    }
    #topnavi li a   {
        padding:15px 3%;
        width:94%;
        color:#fff;
    }
    #topnavi li li a   {
      padding: 3px 3%;
    }
    
    #topnavi li a:hover, #topnavi li .on    {
        border-radius: 0;
    }

    /* Ash changes for task #1294 */

    #topnavi li a + ul {
        margin-top: 20px;
    }

    #topnavi li a {
        white-space: pre-wrap;
        line-height: 22px;
    }

    #hero {
        display: block !important;
        height: 35vw;
    }

    #hero #slideImages {
        height: auto;
        display: block !important;
    }
    
}



/* Mobile / Tablet less than 767
===========================================================================================   */
@media only screen and (max-width: 767px)  {
	
	.container, header  { width: 90%; }
	
    .home-banner h2 {
        position: static;
        font-size: 33px;
        line-height: 33px;
    }
    footer section  {
        width:100%;  
        margin:0 0 15px 0;
    }
    footer ul li    {
        width:100%;
        list-style: none;
    }
    footer section p    {
        width:100%;  
    }
    #foot p {
        text-align: center;
        width:100%;
    }
    #foot .last {
        float: left;
        margin-top:5px;
    }
    
    #hero {display: none;}
    
    #leftside   {
        width:100%;
        margin:0 0 20px 0;
    }
    .main  {
        width:100%;
        float: left;
    }
    
    #submenu    {
        display: block !important;   
    }
    #leftside li    {
        display: none;   
    }
    
    #cmsForm p,
    #cmsForm .last,
    #cmsForm #submitButton   {
        margin:10px 0;
        width:100%;
    }
    #cmsForm button {
        padding:8px 0;
        width:100%;
        text-align: center;
    }
    .flags  {
        float: right;
        margin:20px 0 0 0;
    }
    .main img   {
        width:100%;
        margin:10px 0;
    }
    
    #search {
        float: left;
        clear: both;
        margin-top:15px;
        width:100%;
    }
    #search input   {
        width:100%;   
        padding:8px 0;
        text-align: center;
    }
    #search button  {
        top:0;  
        right:-1px;
    }
    
    .img-area div {
        float: left;
        margin: 0 0 10px 0;
        width: 100%;
    }
    
    .col2, .col1  {width:100%;}
    
    .map-area   {
        width:100%;
        margin:0 0 20px 0;
    }
    
   .intro_agents li {   
     width: 100%;
     border: none;
   }
    .intro_agents .top { display: none; }
    .intro_products .top  { display: block; }
    
    table,
    tbody,
    tr,
    td {
      display: block;
      width: 100% !important;
    }
    
    tr {
      margin-bottom: 16px;
    }
    
    td {
      padding: 10px;
      box-sizing: border-box;
    }
    
}



/* Mobile / Tablet less than 480
===========================================================================================   */
@media only screen and  (max-width: 615px)  {
	
	#timeline { margin-top: 20px; min-height: 1800px }
	#timeline li { width: 100%; margin-bottom: 50px; }
	#timeline li:nth-child(even) { margin-bottom: 40px; }

	#timeline span { margin-left: 0; }
	#timeline li section { width: 70%; min-height: 90px; }
	#timeline li:nth-child(even) span { margin-right: 0; }
	#timeline li div:before { width: 100%; }
	

	
}

/* Mobile / Tablet less than 350
===========================================================================================   */
@media only screen and  (max-width: 375px)  {
	
	#timeline li section { width: 60% }
	
}

@media only screen and (min-width: 980px)  {
	.threesixty.car {
		-ms-transform: scale(0.75);
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
		margin: -50px 0;
	}

}


/* Custom for new design */
.line {
    clear: both;
    height: 30px;
   /* background: url(/_img/layup/line.png) no-repeat center bottom;
    background-size: 100% 100%;
    margin: 0 -140px; */

}



#topnavi {
    z-index: 99999;
}

.site-header {
    position: relative;
    padding: 30px 0;
    margin: 0;
    width: 100%;
}

.site-header .logo {
    width: 70%;
    height: 50px;
    margin-left: 0;
}

.fixhead .site-header #menu {
    right: 20px !important;
}

.fixhead .site-header {
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    margin: 0 !important;
    left: 0;
    width: 100%;
}

.fixhead header .logo,
.fixhead header .logo2 {
    height: 50px;
    width: 70%;
}

.contact {
    display: none;
}

.jump .inner {
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    position: relative;
}

.jump svg {
    position: absolute;
    top: 30px;
    right: 30px;
    height: 32px;
}

.jump .inner:before {
    padding-top: 100%;
    content: '';
    display: block;
}

.jump span {
    background: rgba(255,255,255,0.8);
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 50%;
    padding: 20px 10px;
    color: #0b0b0b;
    font-size: 20px;
    transform: translateY(-50%);
    font-weight: bold;
}

.jump {
    max-width: 230px;
    margin: 0 auto 20px;
    display: block;
}

.clearfix {
    overflow: auto;
}

.padded {
    padding: 50px 0;
}

.b_home .padded {
    padding:  0;
}

.no-top {
    padding-top: 0;
}

.no-bottom {
    padding-bottom: 0;
}

.row {
    overflow: auto;
}

.flipster__button {
    opacity: 1 !important;
}

.flipster__button svg {
    stroke: #333 !important;
    height: 24px;
}

.flipster__button:hover {
    background: 0 0 !important;
}

.flipster__button:focus {
    outline: 0;
}

@media screen and ( min-width: 650px ) {

    .jump {
        width: 50%;
        max-width: 100%;
        padding: 15px;
        float: left;
        box-sizing: border-box;
    }

    .jump .inner {
        max-width: 230px;
        margin: 0 auto;
        border: 1px solid #d8d8d8;
    }
}

@media screen and (min-width: 960px) {
    #topnavi {
        float: right;
        text-align: center;
    }

    #topnavi li {
        list-style: none;
        display: inline-block;
        position: relative;
        float: none;
    }

    #topnavi li a {

        text-transform: uppercase;
        color: #1e3060;
        float: none;
        clear: none;
        transition:0.3s all ease;
 
        padding: 5px 0 5px 20px;
        margin-bottom: 20px;
        border-radius: 0;
        background: 0 0;
        display: inline-block;
    }

    #topnavi li:last-of-type a {
        border: 0;
    }
    #topnavi a.is-open,
    #topnavi a:hover,
    #topnavi  li:hover > a,
    #topnavi a.on {
        background: 0 0;
        color: #000;
    }

    #topnavi ul {
        display: none;
        position: absolute;
        text-align: left;
        top: 28px;
        left: 27px;
        z-index: 99999;
        padding: 10px 0;
        background: #f6f6f6;
        -moz-box-shadow: 0 0 4px rgba(0,0,0,.2);
        -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
        box-shadow: 0 0 4px rgba(0,0,0,.2);
        width: auto;
        min-width: 200px;
        margin: 0;
        padding: 10px 0;
    }

   #topnavi li:hover > ul {
       display: block;
   }
    
    #topnavi ul li {
        float: none;
        display: block;
        width: 100%;
    }

    #topnavi ul a {
        display: block;
        color: #fff;
        white-space: nowrap;
        float: none;
        width: 100%;
        white-space: wrap;
    }

    #topnavi ul a:hover{
        background: #000;
    }
    
    #topnavi ul ul {
        top: 0;
        left: 100%;
    }

    .site-header {
        padding: 30px 0 10px;
    }

    .site-header .logo {
        float: left !important;
        width: 300px;
        height: 75px;
        margin-top: 30px;
    }

    .fixhead header {
        /*left: 15px;*/
        /*right: 0;*/
        width: inherit !important;
        padding: 10px 15px;
        box-shadow: 0 0 !important;
        margin: 0 !important;
        left: auto !important;
    }

    .fixhead header .logo,
    .fixhead header .logo2 {
        width: 40%;
    }

    header .logo,
    header .logo2 {
        left: 0;
        position: relative;
    }

    .fixhead header .contact,
    .fixhead header .contact {
        margin-top: 15px;
    }

    .contact {
        display: block;
        float: right;
        margin: 0;
    }

    .contact span {
        position: relative;
        top: -4px;
    }

    .contact li {
        display: inline-block;
        margin-left: 20px;
    }

    .contact .lang img {
        width: 22px;
        height: 22px;
    }

    .contact .it {
        margin-left: 5px;
    }

    #topnavi ul {
        left: 15px;
        padding: 0;
    }

    #topnavi ul ul li {
        float: none;
        display: block;
        padding: 0 !important;
        margin: 0 !important;
        word-wrap: break-word;
    }

    #topnavi ul a {
        color: #000;
        font-size: 14px;
        border: 0;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
        text-decoration: none;
        transition: none;
        word-wrap: break-word;
        text-transform: none;
    }

    #topnavi ul a:hover {
        color: #000;
        background: #c9c9c9;
        text-decoration: none;
    }
    
    
    

    .row {
        margin: 0 -15px;
    }

    .jump {
        float: left;
        box-sizing: border-box;
        width: 25%;
        max-width: none;
        padding: 0 15px;
    }
}

@media screen and ( min-width: 860px ) {
    .col-half {
        width: 50%;
        float: left;
        box-sizing: border-box;
    }
}

@media screen and ( min-width: 1200px ) {
    .jump .inner {
        max-width: 235px;
    }
}