/*
   Medium devices (up to 1399px)
   Breakpoint 0
*/
@media only screen and (max-width: 1399px) {

   /* Responsive test for JS */
   
   #breakpoint {
      z-index: 10;
   }
   
   #mainmenu > ul > li:nth-last-child(+2) ul {
      left: auto;
      right: 0;
   }
      
   #mainmenu > ul > li:nth-last-child(+2) ul:before {
      left: auto;
      right: 6px;
   }

}


/*
   Medium devices (up to 991px)
   Bootstrap breakpoint 1
*/
@media only screen and (max-width: 1199px) {

   /* Responsive test for JS */
   
   #breakpoint {
      z-index: 20;
   }

   body table.dataTable{font-size:14px;width:auto;}
   
   /* Piechart Quickfix */
   .col-sm-3 .piechart canvas{height:auto !important;}
   
    #cookieConsentOverlay div.cookie-logo, #cookieConsentOverlay div.cookie-text, #cookieConsentOverlay div.cookie-buttons{
	   width:100%;
	   padding-left:20px;
	   padding-right:20px;
	}
	#cookieConsentOverlay .cookieLayer{
		width:100%;
	}
	
	/* hide right menu */
	.fixed-right-menu{display:none !important;}
   
}


/* 
   Small devices (up to 991px)
   Bootstrap breakpoint 2
*/
@media only screen and (max-width: 991px) {

   /* Responsive test for JS */
  .ce-table-first-row-left th:first-child,.ce-table-first-row-left td:first-child{font-size:10px;font-weight:normal;} 
      
   #breakpoint {
      z-index: 30;
   }

   /* Logos in footer */
   
   #footer .logoitem,
   #footer .logoitemimage,
   #footer .logoitemimage div {
      width: 100px;
      height: 100px;   
   }         
   
   #footer .logoitemimage img {   
      max-height: 70px;
      max-width: 70px;
   }

   /* Solutionworld */

   div.sw_layers {      
      width: 67%;
   }
   
   div.sw_interfaces {      
      width: 33%;               
   }
   
   /* Slider */
   
   .screenshotslider {
      padding: 35px 100px 50px 100px;
   }
   
   .screenshotslider .carousel-control {
      width: 100px;
   }
   
   /* Testimonial */
   
   .testimonial-small .testimonial-photo {     
      width: 100px;
   }
      
   .testimonial-photo .logoitem {     
      width: 100px;
      height: 100px;
   }   
   
   .testimonial-photo .logoitemimage,
   .testimonial-photo .logoitemimage > div {     
      width: 98px;
      height: 98px;
   }
   
   .testimonial-photo .logoitemimage img {
      max-width: 70px;
   }
   
   .testimonial-small .testimonial-info {
      margin-left: 130px;   
   }
   
   .table-fitcheck-preview-wrapper {
      display: none !important;
   }
   
   /* Project */
   
   .project .project-photo {     
      width: 100px;
   }
      
   .project-photo .logoitem {     
      width: 100px;
      height: 100px;
   }   
   
   .project-photo .logoitemimage,
   .project-photo .logoitemimage > div {     
      width: 98px;
      height: 98px;
   }
   
   .project-photo .logoitemimage img {
      max-width: 70px;
   }
   
   .project .project-info {
      margin-left: 130px;   
   }
   
}


/*
   Smaller devices (up to 767px)
   iPad Portrait
   Bootstrap breakpoint 3
*/
@media (max-width: 767px),
screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {

  .cookieTbl thead tr th:nth-child(4),
  .cookieTbl tbody tr td:nth-child(4){
	display:none;  
  }
  #cookieConsentOverlay{font-size:12px;}
  .cookieTableWrapper{width:100%;}

  /* DataTable CSS for responsive */
  table.dataTable{
    width:100% !important;
  }
  table.dataTable thead{
    /*display:none;*/
    border:0;
  }
  
  .dataTables_wrapper table.dataTable thead th{
    padding-left:0px;
  }
  
  table.dataTable thead tr{border:0;}
  table.dataTable thead tr:first-child{
    display:none;
  }
  .dataTables_length, .dataTables_filter{display:none;}
  
  table.dataTable.table thead th{
    border:0;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    padding:0;
    margin:0;
  }
  
  table.dataTable.table thead th{border-bottom:0px;padding:0;margin:0;}
  table.dataTable.table tbody td{border-bottom:0px;padding:0;margin:0;}
 
  
  table.dataTable thead th select.form-control.small{
    margin-top:8px;
    width: calc(100% - 170px);
  }
  
  table.dataTable tr{
    width:100%;
    padding-bottom:20px;
  }
  table.dataTable td{
    float:left;
    width:calc(100% - 10px);
    background:white;
    border:1px solid #ddd;
    border-bottom:none;
    font-size:14px;    
  }
  
  table.dataTable th{
    float:left;
    width:calc(100% - 10px);
    background:white;    
    font-size:14px;    
    border:0;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
  }
  
  table.dataTable.table th:first-child{
    border-top:1px solid #ccc;
  }
  
  table.dataTable th:last-child{
    border-bottom:1px solid #ccc;
  }  
  
  table.dataTable tbody td,table.dataTable tbody th{
    padding:0;
    background: linear-gradient(90deg, #efefef 150px, #fff 150px) !important;
  }
  
  table.dataTable th, table.dataTable td, table.dataTable tr, table.dataTable tr:hover{
    background:white !important;
  }
  
  table.dataTable.table td:last-child{
    margin-bottom:20px;
    border:1px solid #ddd;
  }
  

  
  table.dataTable.table th:last-child{
    margin-bottom:20px;
    border-bottom: 1px solid #ccc;
  }
  
  table.dataTable th::before, table.dataTable td::before {
    content: attr(data-label); 
    word-break: break-word; 
    display: inline-block;
    width:150px;
    font-size:14px;
    height:100%;    
    padding:10px 8px;
    float:left;
  }
  
  table.dataTable th::before{
    font-weight:normal;
  }
  
  table.dataTable thead th:first-child::before{
    font-weight:bold;
  }

  table.dataTable th span, table.dataTable td span{
    padding:10px 8px;
    display:block;
    width:calc(100% - 150px);
    float:left;
  }
  
  table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd,table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1{
    background:white;
  }
  
   table.dataTable.display.table tbody tr:first-child td{
     border-top: 1px solid #ddd;
   }
   /* Responsive test for JS */
   .col-sm-5-cells{width:100%;}
   
   #breakpoint {
      z-index: 40;
   }
   
   /* Intro */
   
   #intro .carousel .item {
      min-height: 0;
   }
   
   #intro .carousel .orientation-bottom {
      position: static;      
   }
   
   #intro .carousel .item-inner {
      padding: 50px 15%;            
   }   
   
   /* Slider */
   
   .carousel-control i {
      margin-top: -20px;
      font-size: 40px;
   }   
   
   .screenshotslider {
      padding: 35px 15% 50px 15%;
   }
   
   .screenshotslider .carousel-control {
      width: 15%;
   }
      
   /* Layout */
   
   #intro {
      margin-bottom: 25px;
   }
   
   .section {
      padding: 50px 0 50px 0;
   }
   
   #intro .section {
      padding: 25px 0 15px 0;   
   }
   
   .csc-frame-indent .fluid-width-video-wrapper,
   .csc-frame-indent .csc-textpic,
   .csc-frame-indent .tx-mediaelements-pi1 {
      margin-bottom: -25px;
   }
   
   #intro .csc-frame-indent .fluid-width-video-wrapper,
   #intro .csc-frame-indent .csc-textpic,
   #intro .csc-frame-indent .tx-mediaelements-pi1 {
      margin-bottom: -15px;
   }
   
   /* Outro */

   #outro {
      position: static;
      background-color: #009ee0;
   }
   
   #outro #call-to-action .btn,
   #outro:hover #call-to-action .btn {
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.71428571;
      margin: 30px 6px 30px 0;
   }
   
   #outro .vcard {
      margin: 9px 0;
   }
   
   #outro .vcard .photo-wrapper {
      width: 85px;
   }
   
   #outro .vcard .info-wrapper p {
      margin-left: 100px;
   }
   
   #outro .vcard .fn,
   #outro .vcard .email-wrapper  {
      max-height: 1000px;
      overflow: visible;
   }
   
   #call-to-action {
      margin-right: 34px;
   }
   
   #contact-person {
      float: left;
   }
   
   /* Page navigation */
   
   #page-breadcrumb {
      display: none;
   }   
   
   #page-tabs {
      float: none;
   }
   
   #page-tabs ul a,
   #page-tabs ul a:hover,
   #page-tabs ul a:focus,
   #sticky-page-navigation.stuck #page-tabs ul a,
   #sticky-page-navigation.stuck #page-tabs ul a:hover,
   #sticky-page-navigation.stuck #page-tabs ul a:focus {
      background-color: transparent !important;
      border: 0 !important;
      padding: 6px 20px 6px 0;
   }
      
   /* Mainmenu */ 
   
   #mainmenu {
      display: none;
   }
   
   #mainmenu-toggler {
      display: block;
   }
   
   /* Footer */
   
   #footermenu {
      padding: 25px 0 25px 0;
   }   
   
   #footer-logos {
      float: none;
   }
   
   #footer .logoitem {
      margin: 0 10px 10px 0;       
   }   
   
   /* Typography */
   
   h1, h2.header {
      font-size: 40px;
   }
   
   h2 {
      font-size: 22px;
   }
   
   /* Solutionworld */
   
   div.sw_layers {      
      width: 59%;
   }
   
   div.sw_interfaces {      
      width: 41%;               
   }

   /* Layout */
   
   .boxed {    
      padding: 0 20px;
   }
   
   /* Metamenu */   
   
   #header.stuck {
      padding-bottom: 15px;
   }   
   
   #metamenu,
   #header.stuck #metamenu {
      float: none;
      min-height: 0;
      opacity: 1;                   
   }
      
   #metamenu ul,
   #header.stuck #metamenu ul {
      margin-top: 10px;
   }    
   
   #metamenu-wrapper {
      background-color: #f4f4f4;
   }
   
   #metamenu #searchform,
   #header.stuck #metamenu #searchform {
      float: right;
      margin: 8px 0 0 8px;
   }       
   
   #metamenu #searchform input:focus {
      font-size: 11px;
      width: 100px;
      padding: 1px 4px;
   }   
   
   #logo,
   #header.stuck #logo {      
      width: 75px;
      margin-top: 15px;
   }   
   
   #logo img,
   #header.stuck #logo img {
      width: 75px;
   }
   
   #logo.duatpass,
   #header.stuck #logo.duatpass {
      width: 135px;
      margin-top: 15px;
   }
   
   #logo.duatpass img,
   #header.stuck #logo.duatpass img {
      width: 135px;      
   }           

   #logo.youatpass,
   #header.stuck #logo.youatpass {
      width: 148px;
      margin-top: 28px;
   }
   
   #logo.youatpass img,
   #header.stuck #logo.youatpass img {
      width: 148px;      
   }    

   /* Typography */
   
   h1, h2.header {
      font-size: 28px;
      font-weight: 400;   
      margin: 0 0 15px 0;   
   }
   
   h2,.section-video-subheader {
      font-size: 16px;
      font-weight: 700; 
      margin: 15px 0 15px 0;
   }
   
   hr {   
      margin: 25px 0 5px 0;
   }      
   
   /* Metro */
   
   .metro {
      padding-top: 10px;      
   }
   
   .metro .item {
      width: 90px;
      height: 90px;
      overflow: hidden;
   }
   
   .metro .double {
      width: 98%;
      /*width: 190px;*/
      height: 190px;
   }
   
   .metro .quad {
      width: 98%;
      /*width: 190px;*/
      height: 190px;
   }
   
   .metro .upright {
      height: 190px;
   }   
      
   .metro .item:hover img {
      opacity: 1;
      /*visibility: visible; /* ie6 ie7 */
      visibility: visible\9; /* ie8 */
   }
   
   .metro .item:hover h2,
   .metro .item:hover h3 {
      background: white;
      background: rgba(255,255,255,0.7);
      color: #009ee0;
   }
   
   .metro .item:hover p {
      opacity: 0;
      /*visibility: hidden; /* ie6 ie7 */
      visibility: hidden\9; /* ie8 */
   }
   
   .metro h2 {
      font-size: 14px;
      line-height: 20px;      
   }
   
   .metro h3 {      
      font-size: 12px;
      line-height: 16px;      
   }
   
   .metro h2 span, .metro h3 span {
      padding: 7px 10px;
   }
   
   /* Testimonials */
   
   .testimonial-big {
      margin-bottom: -25px;
   }
   
   .testimonial-big .reviewer {
      margin-bottom: 25px;
   }
   
   /* Call-To-Action Button */
   
   #intro .btn {      
      min-width: 0;
   }   
   
   /* Teaser */
   .csc-frame-indent .fce_teaser {
      float: none;
      margin-right: 0;
   }     
   
}


/*
   Mobile devices landscape
   iPhone landscape
*/
@media (max-width: 480px),
screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:landscape) {
   
   
   .news-single .article .news-img-wrap{
	   float: none;
		margin-bottom: 20px;
   }
   
	/** B:POR-474 */	
	.mobileAdjustment{
		float:right;
		text-align:right;
		margin-right:20px;
	}
	
	.mobileAdjustment .col-xs-11 .resultView{
		margin-right:-33px;
	}
	
	#chart_bar .data-point-label{
		transform: rotate(90deg);
		margin-top:40px;
	}
    /** E:POR-474 */
	
	/** B:Header Logo */

	header#intro .frame-header-logo .ce-image{
		margin-top:35px;
		margin-bottom:0px;
		width:150px; 
	}


	/** E:Header Logo */

   /* Responsive test for JS */
   
   #breakpoint {
      z-index: 50;
   }
   
   /* Logo */
   
   #header,
   #header.stuck {
     padding-bottom: 10px;
   }   
   
   #logo,
   #header.stuck #logo {      
      width: 37px;
      margin-top: 10px;
   }   
   
   #logo img,
   #header.stuck #logo img {
      width: 37px;
   }
   
   #logo.duatpass,
   #header.stuck #logo.duatpass {
      width: 88px;
      margin-top: 10px;
   }
   
   #logo.duatpass img,
   #header.stuck #logo.duatpass img {
      width: 88px;      
   }           

   #logo.youatpass,
   #header.stuck #logo.youatpass {
      width: 90px;
      margin-top: 18px;
   }
   
   #logo.youatpass img,
   #header.stuck #logo.youatpass img {
      width: 90px;      
   }   
   
   /* Intro */
   
   #intro .carousel .item-inner {
      padding: 25px 15%;            
   }   
   
   .carousel-control i {
      margin-top: -15px;
      font-size: 30px;
   }    
   
   /* Layout */
   
   .boxed {      
      padding: 0 15px;   
   }
   
   /* Outro */
   
   #call-to-action {
      margin-right: 0;
      margin-bottom: -1px;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      text-align: center;
      float: none;
   }
   
   #contact-person .vcard {
      padding: 15px 0;
   }
   
   #outro #call-to-action .btn,
   #outro:hover #call-to-action .btn {
      margin: 18px 6px 18px 0;
   }
   
   #outro .vcard .email-wrapper {
      white-space: normal;
   }
   
   /* Solutionworld */
   
   div.sw_layers {      
      width: auto;
      float: none;
   }
   
   div.sw_interfaces {      
      width: auto;
      float: none;               
   }
   
   div.sw_bus {
      display: none;
   }
   
   div.sw_interfaces_inner {
      margin-left: 0;   
   }
   
   div.sw_interfaces .toggle {
      margin-left: 0;      
   }
   
   /* Testimonial */
   
   .testimonial-small .testimonial-photo {     
      width: 100px;
      float: none;
   }
   
   .testimonial-small .testimonial-info {
      margin-left: 0;
      margin-top: 30px;         
   }   
   
   .testimonial-big {
      display: block;
   }
   
   .testimonial-big .column {
      display: block;      
      width: auto;
   }
   
   .testimonial-big .testimonial-info {
      padding-right: 0;
   }
   
   /* Project */
   
   .project .project-photo {     
      width: 100px;
      float: none;
   }
   
   .project .project-info {
      margin-left: 0;
      margin-top: 30px;         
   }      
   
     .slick-logolist .logoitemimage {margin: 0 auto;}
}


/*
   Mobile devices portrait
   iPhone portrait
*/
@media (max-width: 320px),
screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:portrait) {

   /* Responsive test for JS */
   
   #breakpoint {
      z-index: 60;
   }
   
   /* Outro */
   
   #outro #call-to-action .btn,
   #outro:hover #call-to-action .btn {
      margin: 18px 6px 18px 0;
      display: block;
   }
   
   #outro .vcard .photo-wrapper,
   #outro:hover .vcard .photo-wrapper {
      width: 45px;
   }
   
   #outro .vcard .info-wrapper p,
   #outro:hover .vcard .info-wrapper p {
      margin-left: 60px;
   }
   
   #outro .vcard .tel {
      font-size: 18px;
   }
   
   /* Logos in footer */
   
   #footer .logoitem,
   #footer .logoitemimage,
   #footer .logoitemimage div {
      width: 80px;
      height: 80px;   
   }   
   
   #footer .logoitemimage img {   
      max-height: 60px;
      max-width: 60px;
   }

}