/* =========================================================================================================
   GENERAL STYLESHEET FOR RESPONSIVE; THESE CLASSES / AMEND THE BASIC BOOTSTRAP CSS (/styles/bootstrap.css)     
   ========================================================================================================= */



@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('/webfonts/SourceSansPro-Regular-webfont.eot');
    src: url('/webfonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/SourceSansPro-Regular-webfont.woff') format('woff'),
         url('/webfonts/SourceSansPro-Regular-webfont.ttf') format('truetype'),
         url('/webfonts/SourceSansPro-Regular-webfont.svg#SourceSansPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansPro-Semibold';
    src: url('/webfonts/SourceSansPro-Semibold-webfont.eot');
    src: url('/webfonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/SourceSansPro-Semibold-webfont.woff') format('woff'),
         url('/webfonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
         url('/webfonts/SourceSansPro-Semibold-webfont.svg#SourceSansPro-Semibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansPro-Light';
    src: url('/webfonts/SourceSansPro-Light-webfont.eot');
    src: url('/webfonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/SourceSansPro-Light-webfont.woff') format('woff'),
         url('/webfonts/SourceSansPro-Light-webfont.ttf') format('truetype'),
         url('/webfonts/SourceSansPro-Light-webfont.svg#SourceSansPro-Light') format('svg');
    font-weight: normal;
    font-style: normal;

}





@media screen and (min-width: 768px) {
    .container .jumbotron {
        padding-right: 60px;
        padding-left: 30px;
        padding-top: 48px;
        padding-bottom: 28px;
        background-image: url("/slides/home-slide-adapting-media.jpg");
    }

    .container .jumbotron {
        /* border-radius: 6px; */
        border-radius: 0px;
    }



}


@media screen and (max-width: 768px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 0px;
        width: 100%;
        border: solid 0px #000000;
    }

    .img-logo {
      margin-left: -50px;
      /*height: auto;
      max-width: 70%;*/
      /*padding: 4px;
      margin-top: 8px;
      line-height: 1.428571429;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;*/
}

/*.navbar-nav > li {
  float: left;
  border: solid 1px #000000;
}*/

.navbar-nav {
  float: right;
  margin-top: 0px;
  border: solid 0px #000000;
}




}





/*@media (min-width: 992px){
.col-md-pull-1 {
  right: 8.333333333333332%;
    }
}*/


p {
  font-family: 'SourceSansPro-Regular';
  font-size: 1.0em;
  line-height: 1.3em;
  padding: 0px;
  margin: 0 0 10px;
}

.tight {
  
  line-height: .9em;
  padding: 0px;
  margin: 0 0 10px;
}

footer {
  
  margin: 0;
  width: 100%;
  border: solid #000000 0px;
}

.panel {
  margin-bottom: 20px;
  
  background-color: #dee7f5;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-FatFooter {
  padding: 10px 15px;

  /*padding: 10px 0px 0px 50px;*/
  /*background-color: #f5f5f5;*/
  background-color: #dee7f5;
  /*width: 100%;*/
  /*border-top: 1px solid #dddddd;*/
  border-top: 0px solid #000000;
  /*border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;*/
  
}
.panel-FatFooter a{
    font-size: 1.0em;
    line-height: 1.3em;
}

.product {
  font-family: "SourceSansPro-Regular", Helvetica;
  font-size: 18px;
}

.category {
  font-family: "SourceSansPro-Light", Helvetica;
  font-size: 30px;
}

.no-margin {
  margin: 0px;
}
.margin-5 {
  margin-bottom: 5px;
}
.border-right {
  border-right: 1px solid #9BAFC3;
  padding-right: 25px;
}
.border-left {
  border-left: 1px solid #D5DDE6;
  padding-left: 25px;
}

.col-padding-15{padding:0px 0px 0px 15px;}
.col-padding-25{padding:0px 0px 0px 25px;}
.col-padding-50{padding:0px 0px 0px 50px;}



.banner-headline {font-size:3em;}

.banner-sub-text {font-size:1.8em; line-height:1.0em;}

.banner-headline-xs {font-size:1.4em; line-height:.5em;}

.banner-tagline {font-size:1.2em; line-height:.7em; font-style:italic;}


.support-headline {font-size:3em;}


/* ADDS A CUSTOM STYLE TO THE LIST WITHOUT AFFECTING THE NAVIGATION OR TABS */

.ts-list ul li {
  margin: 2px 0px 0px -20px;
  padding: 0px 20px 0px 14px;
  text-align: left;
  list-style: none;
  background: transparent url(/images/shared/blue-bullet.gif) 0px 6px no-repeat;
  z-index: 1000;
}

/* FIREFOX FIX - target the specific image and add a definition */

.img-responsive {
  display: block;
  height: auto;
  /*max-width: 100%;*/
  width: 100%;
}


/* FILTERS THE NEWS AND PRESS FOR THE HOME PAGE */

#currentNews {
	display: none;
}
#currentPress {
	display: none;
}


/* MARK P LABORATORY*/

/*.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}*/

/* CUSTOM 5 COLUMN SPAN LAYOUT
  *
  * based on http://gridcalculator.dk/
  * width => 1200, gutter => 15px, margin => 15px, columns => 5
  */
 .row-fluid-5 {
   width: 100%;
   *zoom: 1;
   /*padding: 10px 0px 0px 15px;*/
 }
 .row-fluid-5:before,
 .row-fluid-5:after {
   display: table;
   line-height: 0;
   content: "";
 }
 .row-fluid-5:after {
   clear: both;
 }
 .row-fluid-5 [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 80px;
   /*margin-left: 1.875%;
   *margin-left: 1.875%;*/
   margin-left: 1.250%;
   *margin-left: 1.250%;

   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

 .row-fluid-5 .controls-row [class*="span"] + [class*="span"] {

   margin-left: 1.875%;
    
 }
 .row-fluid-5 [class*="span"]:first-child{
    margin-left: 0;
 }
 .row-fluid-5 .span1 {
   width: 19%;
   *width: 19%;
 }
 .row-fluid-5 .span2 {
   width: 24%;
   *width: 24%;
 }
 .row-fluid-5 .span3 {
   width: 16%;
   *width: 16%;
 }
 .row-fluid-5 .span4 {
   width: 14%;
   *width: 14%;
 }
 .row-fluid-5 .span5 {
   width: 16%;
   *width: 16%;
 }
  .row-fluid-5 .span6 {
   width: 56%;
   *width: 56%;
 }

 .row-fluid-5 .span7 {
   width: 36%;
   *width: 36%;
 }

 /* responsive ONLY */

 @media (max-width: 600px){ /* spans reduce to 100px then go full width */

    .row-fluid-5 [class*="span"]{
    margin-left: 0;
    float: left;
    width: 100%;
    padding: 10px; 
    }

 }




 /*custom mpotampa 05.06.15*/

 .TwoPixelPadding { margin-bottom:5px; padding:3px; border:0px solid #000000; }
 
 .TenPixelPadding { margin:10px; padding:10px; border:0px solid #000000; }

.MenuTitle {font-family: "SourceSansPro-Regular", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.0; font-size: 1.2em; margin-bottom: 5px;}
.SubMenuTitle {font-family: "SourceSansPro-Regular", Helvetica, Arial, sans-serif; font-weight: 500; line-height: .9; font-size:1.1em; margin-bottom: 5px; margin-top: 5px;}


.footer_branding {
  width: 375px;
  height: 95px;
  position: absolute;
  
  margin: 300px 0px 0px 730px;
  border: 0px solid #000000;
  color:#000000;  
}

/* ==========================================================================
   A STICKY FOOTER TO MAKE IT ALWAYS STICK TO THE BOTTOM by M.POTAMPA
   ========================================================================== */

        /** {
            margin: 0;
        }*/

        html, body {
            height: 100%;
        }

        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -4em;
        }

        #Footer, .push {
            height: 4em;
        }
/* FOR THE MODAL WINDOW POPUPS - OPTIONAL STYLING */
        .responsive-container {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 0;
            height: 0;
            overflow: hidden;
            background: #ffffff;
        }
        
               
         .responsive-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
        }

        .modal.custom .modal-dialog {
            width: 80%;
            margin: 0 auto;
        }

       .close-video {
            float: right;
            background:none;
            border:none;
            margin: -30px -20px 0px 0px;
            font-size: 41px;
            font-weight: bold;
            line-height: 1;
            color: #009bdf;
            text-shadow: 0 0px 0 #ffffff;
        }

        .close {
            float: right;
            background: none;
            border: none;
            margin: 0px 0px 0px 0px;
            font-size: 31px;
            font-weight: bold;
            line-height: 1;
            color: #009bdf;
            text-shadow: 0 0px 0 #ffffff;
        }

/* FOR THE HOME IMAGE RECYCLER*/



#cycler {
	position: relative;
	/*margin: 60px 0px 0px 40px;*/
	border: 0px solid #000000;
    /*width:100%;
    height: auto !important;*/
	width: 1024px;
	height: 380px;
}
#cycler p {
	position: absolute;
	/*top: 10px;
                right: 10px;*/
	color: #ffffff;
	margin: 60px 0px 0px 40px;
	z-index: 4;
}
#cycler img {
	position: absolute;
	z-index: 1;
/*	margin: 0px 0px 0px -512px;
	margin: 0px 0px 0px 0px\9; /* IE 8 and below */
	/*margin: 0px 0px 0px 0px;*/ /*IE*/
	background-color: white;
}
#cycler img.active {
	z-index: 3;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */

#cycler img {
	position: absolute;
	z-index: 1;
	margin: 0px 0px 0px 0px;
	background-color: white;
}
}


/* UNIVERSAL SPACING ELEMENTS*/

.horizontal-rule-15 {
clear: both;
width: 100%;
height: 15px;
border-bottom: 1px solid #D5DDE6;
}

.horizontal-rule-20 {
clear: both;
width: 100%;
height: 20px;
border-bottom: 1px solid #D5DDE6;
}



.horizontal-rule-25 {
clear: both;
width: 100%;
height: 25px;
border-bottom: 1px solid #D5DDE6;
}


.horizontal-rule-30 {
clear: both;
width: 100%;
height: 30px;
border-bottom: 1px solid #D5DDE6;

}

.horizontal-rule-30-home {
clear: both;
width: 95%;
height: 30px;
border-bottom: 1px solid #D5DDE6;

}

/*spacing, brought over from the old main styles */

.clear {
clear:both;
}
.clear-0 {
clear:both;
height:0px;
}
.clear-5 {
clear:both;
height:5px;
}
.clear-10 {
clear:both;
height:10px;
}
.clear-15 {
clear:both;
height:15px;
}
.clear-20 {
clear:both;
height:20px;
}
.clear-22 {
clear:both;
height:22px;
}
.clear-25 {
clear:both;
height:25px;
}
.clear-30 {
clear:both;
height:30px;
}
.clear-35 {
clear:both;
height:35px;
}
.clear-40 {
clear:both;
height:40px;
}
.clear-42 {
clear:both;
height:42px;
}
.clear-45 {
clear:both;
height:45px;
}
.clear-50 {
clear:both;
height:50px;
}
.clear-60 {
clear:both;
height:60px;
}
.clear-70 {
clear:both;
height:70px;
}
.clear-80 {
clear:both;
height:80px;
}
.clear-90 {
clear:both;
height:90px;
}
.clear-100 {
clear:both;
height:100px;
}
.clear-110 {
clear:both;
height:110px;
}
.clear-120 {
clear:both;
height:120px;
}
.clear-130 {
clear:both;
height:130px;
}




/* ================================================ */
/* Responsive - Media queries                       */
/* ================================================ */
 
 
/* ============================================== */
/* HDTV                                           */
/*                                      1920x1080 */
/* ============================================== */
@media screen and (min-width: 1080px) and (max-width: 1920px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Widescreen                                     */
/*                                       1280x800 */
/* ============================================== */
@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       980x     */
/* ============================================== */
@media screen and (min-width: 980px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       x979     */
/* ============================================== */
@media screen and (max-width: 979px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* iPad Landscape & Portrait                      */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */


 
}
 
/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* iPad Portrait                                  */
/*                                       768x1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Small Tablet Landscape/Portrait                */
/*                                        800x600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
 
/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        568x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        480x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      320x240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       240x320 */
/* ============================================== */
@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}