html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,figure, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight:normal; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; }  :focus { outline: 0; }  ins { text-decoration: none; } del { text-decoration: line-through; }  table { border-collapse: collapse; border-spacing: 0; }
@font-face {
    font-family: 'LatoLatinWeb';
    src: url('fonts/LatoLatin-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}
  
@font-face {
    font-family: 'LatoLatinWebLight';
    src: url('fonts/LatoLatin-Light.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}  
@font-face {
    font-family: 'LatoLatinWeb';
    src: url('fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'LatoLatinWebSemibold';
    src: url('fonts/LatoLatin-Semibold.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Semibold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Semibold.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


html{overflow-y:scroll;overflow-x:hidden}
body{font-family: LatoLatinWeb, sans-serif;}
#content,.page{width:100%;}
.assistive{display:none !important;}
.off-view,.off-the-view{position:fixed!important;left:-2000em;} 
.clearfix{clear:both;} 
.main-banner {width:100%; height:100vh; background:url(images/main-banner.1.jpg) center center no-repeat; background-size:cover; position:fixed; z-index:1;}
.home-intro {width:100%; height:100vh; position:relative; z-index:2; display:table}
.intro-message { display:table-cell; width:100%; height:100vh; vertical-align:middle;}
.intro-message h2{ color:#fff;  margin:0 0 0 30% ; background:rgba(27,68,156,0.5); font-size:2.7em; line-height:1.3em;font-weight:300; padding: 30px 40px 30px 40px; text-transform:uppercase;letter-spacing:2px;font-family: 'LatoLatinWebLight';}
.intro-message a{ color:#fff; text-decoration:none;display:block;}
.intro-message p{ color:#fff; margin:0 0 0 30% ; background:rgba(0,0,0,0.5); font-size:1.45em; line-height:1.3em;font-weight:300; padding:15px 40px 15px 40px;letter-spacing:2px; }
.page {position:relative;z-index:2}
#top-link{position:absolute; top:0; left:0;}
.main-header {position:fixed; top:0; left:0; width:100%; height: 80px; background:rgba(255,255,255,0.85);z-index:100000;-moz-transition: all 0.2s ease-out; }
.main-header h1{float:left; width:200px; height:80px; }
.main-header h1 a{ width:200px; height:80px; background:url(icons/DP.Dermaceuticals.svg) 0 8px no-repeat; background-size:120px auto;text-indent:-2000em;display:block; overflow:hidden; }
.menu-holder{float:right;} 
.main-header nav{float:left;} 
.main-header .functional{float:left; margin-left:10px; } 
.main-header .functional ul li {display:inline-block;font-weight:normal;font-family:LatoLatinWebSemibold; text-decoration:none; color:#000; line-height:80px;font-size:0.875em;letter-spacing:1px; position:relative; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;position:relative;}   
.main-header .functional ul li a { color:#000; }   
.main-header .functional ul li .drop-holder .drop-holder-wrapper a { color:#fff; }   
.main-header .functional ul li span:before{display:inline-block;  padding:0 15px; line-height:80px;cursor:pointer; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} 

.main-header .functional ul li:hover span{ color:#1b449c;  }  
.main-header .functional ul li .drop-holder { position:absolute; top:62px; right:-10px; width:300px;line-height:1.4em; display:none;z-index:20000000} 
.main-header .functional ul li .drop-holder.drop-wide { width:400px; } 
.main-header .functional ul li.open .drop-holder { display:block;} 
.main-header .functional ul li .cart-count { position:absolute; top:19px; right:5px; width:17px; height:17px; border-radius:9px; background:#f00; line-height:17px;  color:#fff; text-align:center; font-size:.75em; font-family:arial,sans-serif; line-height:16px; overflow:hidden; -webkit-touch-callout: none; -webkit-user-select: none;  -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}  
.main-header .functional ul li .cart-count.working {transform:scale(0.1);}  
.main-header .functional ul li .drop-holder .drop-holder-wrapper{padding:15px; background:#fff; border:1px #ddd solid; position:relative;} 
.main-header .functional ul li .drop-holder .drop-holder-wrapper:before{position:absolute; content:''; width:9px; height:9px; border-top:1px #ddd solid; background:#fff; border-right:1px #ddd solid; transform:rotate(-45deg); top:-6px; right:27px;} 
.main-header .functional ul li .drop-holder p{ line-height:1.5em; font-size:0.875em; text-align:center; padding:10px;}  
.main-header nav ul li {display:inline-block;position:relative;} 
.main-header nav ul li a{ font-family:LatoLatinWebSemibold; text-decoration:none; color:#000; line-height:80px; padding:0 15px;display:block; font-size:0.75em;letter-spacing:1px; } 
.main-header nav ul li.current a{ color:#1b449c; } 
.main-header nav ul li.current ul li a{ color:#000; } 

.main-header nav ul li a span{ display:block; position:relative;} 
.main-header nav ul li a span:after{ display:inline-block; position:absolute; bottom:25px; left:50%; width:0; height:3px; background:#1b449c; content:'';} 
.main-header nav ul li a:hover span:after{  left:0; width:100%; } 
.main-header nav ul li.has-sub.on a span:after{  left:0; width:100%; } 
.main-header, .main-header h1 a, .main-header nav ul li a, .main-header nav ul li a span:after,.main-header .functional ul li .drop-holder,.main-header .functional ul li .cart-count,.main-header .functional ul li span,.main-header .menu-trigger,.main-header nav {-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.main-header .sub-menu-holder  {-moz-transition: top 0.2s ease-out; -webkit-transition: top 0.2s ease-out; -o-transition: top 0.2s ease-out; transition: top 0.2s ease-out;}
.main-header .sub-menu-holder {position:absolute; top:80px; left:-30px; width:300px; background-color:rgba(255,255,255,0.85);  display:none;} 
.main-header.small .sub-menu-holder { top:40px;background-color:rgba(255,255,255,1);  }
.main-header nav ul li .sub-menu-holder ul, .main-header nav ul li .sub-menu-holder ul li {margin:0; padding:0;}
.main-header nav ul li .sub-menu-holder ul {margin-bottom:10px; position:relative; }
.main-header.small nav ul li .sub-menu-holder ul { }
.main-header nav ul li .sub-menu-holder ul li { display:block;  position:static} 
.main-header nav ul li .sub-menu-holder ul li a { line-height:1.3em; padding: 6px 15px 6px 15px; }
.main-header nav ul li .sub-menu-holder ul li a:hover { color:#1b449c} 

.main-header.small { height: 40px; background:rgba(255,255,255,1); border-bottom:1px #ddd solid;}
.main-header.small h1 a{ height:37px; background:url(icons/DP.Dermaceuticals.svg) 0 3px no-repeat; background-size:80px auto; }
.main-header.small nav ul li a{ line-height:40px; } 
.main-header.small .functional ul li { line-height:40px; } 
.main-header.small .functional ul li span:before{ line-height:40px; } 
.main-header.small nav ul li a span:after{ bottom:0; } 
.main-header.small .functional ul li .drop-holder { top:40px; } 
.main-header.small .functional ul li .cart-count { top:19px; }    
.main-header.small .functional ul li span{ line-height:40px; }   


.main-header .functional ul li .drop-holder-wrapper ul {  margin:0 0 10px 0; }
.main-header .functional ul li .drop-holder-wrapper ul li {display:table; margin:0 0 5px 0; padding:0 0 5px 0 ; line-height:1em;width:100%; letter-spacing:0; border-bottom:1px #eee solid;}
.main-header .functional ul li .drop-holder-wrapper ul li span{display:table-cell; margin:0;  font-size:0.675rem; line-height:1.25em;padding:0; color:#666; cursor:default}
.main-header .functional ul li .drop-holder-wrapper ul li span.n{ width:53%; font-size:0.75rem;}
.main-header .functional ul li .drop-holder-wrapper ul li span.q{ width:5%; text-align:right;}
.main-header .functional ul li .drop-holder-wrapper ul li span.ps{ width:21%;text-align:right;}
.main-header .functional ul li .drop-holder-wrapper ul li:last-child span.ps,.main-header .functional ul li .drop-holder-wrapper ul li:last-child span.pt{font-family:LatoLatinWebSemibold;font-weight:700}
.main-header .functional ul li .drop-holder-wrapper ul li span.pt{ width:21%;text-align:right;}

ul.main-basket {  margin:0 0 10px 0;position:relative; z-index:1 }
ul.main-basket li {display:table; margin:0 0 5px 0; padding:0 0 5px 0 ; line-height:0.875rem;width:100%; letter-spacing:0; border-bottom:1px #eee solid;}
ul.main-basket li div{display:table-cell; margin:0; font-size:0.875rem; line-height:1.45em;padding:0; color:#666; cursor:default}
ul.main-basket li:first-child div{ font-size:0.675rem; text-transform:uppercase;font-family:LatoLatinWebSemibold;font-weight:700; letter-spacing:1px;}
ul.main-basket li div.n{ width:50%; }
ul.main-basket li div.q{ width:5%; text-align:right;}
ul.main-basket li div.ps{ width:19%;text-align:right; font-size:0.75rem;}
ul.main-basket li:last-child div.ps,ul.main-basket li:last-child div.pt{font-family:LatoLatinWebSemibold;font-weight:700; font-size:1rem;}
ul.main-basket li div.pt{ width:16%;text-align:right; font-size:0.75rem;}
ul.main-basket li div.f{ width:10%;text-align:right; font-size:0.75rem;}
ul.main-basket li div.f span.plus, ul.main-basket li div.f span.minus{ width:20px;height:20px;border-radius:10px; display:inline-block; background:#ccc; position:relative; margin:0 5px; cursor:pointer}
ul.main-basket li div.f span.plus:after,ul.main-basket li div.f span.minus:after{ width:20px;height:20px; display:inline-block; content:'+'; color:#fff; line-height:20px; font-size:1.875em; text-align:center}
ul.main-basket li div.f span.minus:after{ content:'-'; } 

.basket-holder {position:relative}
.basket-holder p.centered-message{line-height: 1.5em; font-size: 1em; text-align: center; box-sizing: border-box; padding: 10px 30px 30px 30px; max-width: 1150px; width: 98%; margin: 0 auto; color:#838182;}
.drop-holder p.centered-message{text-transform:uppercase}

.limits { width: 98%;  margin:0 auto; }
.limits.slim{ max-width: 1150px;}

.wide-message { background:#fff; padding: 40px 0 50px 0;}
.wide-message.transparent { background:transparent; padding: 40px 0 50px 0;}
.wide-message h2 {line-height:1.4em; font-size:2em; text-align:center; padding:10px; font-weight:500;}
.wide-message p {line-height:1.5em; font-size:1em; text-align:center; padding:10px;  margin:0 16%}
 
.wide-message p img {display:inline-block; max-width:100%; height:auto;}
.wide-message.transparent p { max-width:1150px; }


.wider-message { background:#fff; padding: 0 0 0px 0;}
.wider-message.generic { background:#fff; padding: 0 0 0px 0;}
.wider-message.generic.intro { background:#fff; padding: 100px 0 0px 0;}
.wider-message-image {display:table; width:100%; padding: 0 0 50px 0;}
.wider-message-cell { padding:0; display:table-cell; vertical-align:middle}
.wider-message-image h2 {line-height:1.4em; font-size:2em; text-align:center;  padding: 0 10px 10px 10px; font-weight:500;}
.wider-message p{line-height:1.5em; font-size:1em; text-align:center; padding:10px 30px; margin:0 auto;letter-spacing:1px;box-sizing:border-box; margin:0 16%}
.wider-message-image p{line-height:1.5em; font-size:1em; text-align:center; padding:10px 30px; letter-spacing:1px;box-sizing:border-box; margin:0 16%}
.wider-message p.img{padding-bottom:0;text-align:justify }
.wider-message ul.images-row{max-width:1150px;width:90%; display:table; margin:0 auto;overflow:hidden;}
.wider-message ul.images-row li { display:table-cell; text-align:center; overflow:hidden; }
.wider-message p img{max-width:100%; display:inline-block; height:auto; }
.wider-message ul.images-row li img{max-width:100%; display:inline-block; height:auto; }
.wider-message.italic p { font-family: 'Playfair Display', serif; text-align:left;}
.wider-message.italic p span{ font-size:0.875em; text-align:right; display:block;}


.intro h2{line-height:1.4em; font-size:3em; text-align:center; padding:10px;font-family:LatoLatinWebLight; font-weight:normal;}

.steps {text-align:center; margin-top:20px;}
.steps ul li{display:inline-block; }
.steps ul li span.f {display:block; width:150px;height:auto;border:0; font-size:0.75em;  box-sizing:border-box;}
.steps ul li span.n{display:block; width:32px; height:32px; font-size:0.75em; border:2px #ccc solid; margin:0; margin-left:58px;margin-bottom:4px; line-height: 30px; background:#f5f5f5; position:relative; z-index:2; box-sizing:border-box; }
.steps ul li.current span.n{ background:#1b449c; color:#fff; border:2px #1b449c solid; }
.steps ul li span.n:after{  position:absolute; width:148px; height:2px; left:30px;top:15px;background:#ccc;content:'';z-index:-1; }
.steps ul li:last-child span.n:after{ display:none; }

.sub-section { background:#fff; padding: 20px 0 20px 0; color:#838182}
.sub-section h2{line-height:1.4em; font-size:3em; text-align:center; padding:10px;font-family:LatoLatinWebLight; font-weight:normal;}
.sub-section p {line-height:1.5em; font-size:1em; text-align:center;box-sizing:border-box;
    padding: 10px 30px;
    max-width: 1150px;
    width: 98%;
    margin: 0 auto;} 
.quart li {width:23%; margin-left:1%;margin-right:1%;}
.triple li {width:31.3333%; margin-left:1%;margin-right:1%;}
.text-boxes {width:98%; margin:20px 1%} 
.text-boxes li{float:left; display:block; position:relative; margin-bottom:20px;overflow:hidden;}
.text-boxes li .inner-box{padding:20px ; border:1px #ddd solid; display:block; vertical-align:top; text-align:center;position:relative; z-index:1;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration:none; color:#838182; box-sizing:border-box;font-size:0.875em; line-height:1.5em; }
.text-boxes.products li .inner-box{ min-height:240px; }
.text-boxes.blog li .inner-box{padding:0; } 
.text-boxes li .inner-box img {  margin-bottom:15px;width:100%; height:auto; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display:block}
.text-boxes.products li .inner-box img {position:absolute; left:5px; top:20px;  margin:0; display:block; height:200px; width:auto;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index:1;} 
.text-boxes.products li .inner-box .inner-wrapper { position:relative;z-index:2; margin-left:120px;} 
.text-boxes.blog li .inner-box img { margin:0; float:none; margin-right:20px;display:block; height:auto; width:100%; }
.text-boxes.blog li .inner-box .imageheader { width:100%; height:auto; overflow:hidden; } 
.text-boxes.products li .inner-box:hover img { transform:scale(1.08);}
.text-boxes.blog li .inner-box:hover img { transform:scale(1.05);}
.text-boxes li .inner-box h3 { font-size:1.25rem;letter-spacing:1px; text-align:left; line-height:1.5em;font-family:LatoLatinWebLight;} 
.text-boxes.blog li .inner-box h3 { font-size:1.25rem;letter-spacing:1px; text-align:left; line-height:1.5em;font-family:LatoLatinWeb; margin:0; padding:20px 20px 5px 20px ; color:#000}
.text-boxes li .inner-box h3 span{  font-family:LatoLatinWebSemibold; }
.text-boxes li .inner-box p { font-size:0.875rem; line-height:1.4em;letter-spacing:1px; text-align:left; padding:10px 10px;}
.text-boxes.products li .inner-box { font-size:0.875rem; line-height:1.4em;letter-spacing:1px; }
.text-boxes.blog li .inner-box p { font-size:0.875rem; line-height:1.4em;letter-spacing:1px; text-align:left; padding: 10px 20px 20px 20px; width:100%}
.text-boxes.products li .inner-box p {  padding: 10px 20px 20px 0; }
.text-boxes li .inner-box .add-cart {  font-family:LatoLatinWebSemibold; font-size:0.65rem; padding:5px 10px; background:#fff; border:1px #ddd solid; color:#838182; position:absolute; right:10px; bottom:10px;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; box-sizing:border-box; width:100px}
.text-boxes li .inner-box .price {  font-family:LatoLatinWebSemibold; font-size:0.875rem; padding:5px 10px; background:#fff; color:#1b449c; position:absolute; right:110px; bottom:10px; }
.text-boxes li .inner-box .add-cart:hover { background:#1b449c; border:1px #1b449c solid; color:#fff; }
.text-boxes li .inner-box:hover{ -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.34);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.34);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.34);}

.blog-section { margin-top:80px; padding-bottom:20px; color:#838281}
.blog-section header {  }
.blog-section h2 {line-height:1.4em; font-size:1.75em; text-align:left; padding:50px 10px 0 0;font-family:LatoLatinWebSemibold; font-weight:normal; }
.blog-section p {line-height:1.65em; font-size:1em; text-align:left; padding:10px 10px 10px 0;font-family:LatoLatinWebSemibold; font-weight:normal;letter-spacing:0.5px }
.blog-section p a{ color:#555 }
.blog-section ul li a{ color:#555 }
.blog-section p.date {line-height:1.5em; font-size:0.875em; text-align:left; padding:20px 10px 10px 0;font-family:LatoLatinWebSemibold; font-weight:normal;  }
.blog-section p.date span{display:inline-block; margin-right:4px; }
.blog-section p.date span.fa-bookmark{margin-left:10px; }
.blog-section p.date a{ color:#555; text-decoration:none;font-size:1em;  }
.blog-section p.date a:hover{ color:#1b449c;  text-decoration:underline;}
.blog-section p strong,.blog-section p b { font-family:LatoLatinWebSemibold; font-weight:normal; color:#000;}
.blog-section blockquote {line-height:1.5em; font-size:1em; text-align:left; padding:0 10px 0 15px; margin:10px 0;font-family:LatoLatinWebSemibold; font-weight:normal; border-left:2px #1b449c solid;}
.blog-section ul li {line-height:1.5em; font-size:1em; text-align:left; padding:5px 10px 5px 15px;font-family:LatoLatinWebSemibold; font-weight:normal; position:relative; }
.blog-section ul li:before {position:absolute;height:6px; width:6px;border-radius:3px; background:#1b449c; top:0.75em; left:0;content:''}
.blog-section ol {list-style-type:alpha; margin-left:15px; }
.blog-section ol li {line-height:1.5em; font-size:1em; text-align:left; padding:5px 10px 5px 15px;font-family:LatoLatinWebSemibold; font-weight:normal; position:relative; }

.blog-section h3 {line-height:1.5em; font-size:1.25em; text-align:left; padding:20px 10px 10px 0;font-family:LatoLatinWeb; font-weight:normal; }
.blog-section .blog-content { max-width:1150px; width:98%;margin:0 auto;}
.blog-section .figure { width:100%; clear:both; height:220px;} 

.breadcrumbs {padding: 20px 0; background:#eee;}
.breadcrumbs ul {max-width:1150px;width:98%; margin:0 auto; }
.breadcrumbs ul li:before {display:none;}
.breadcrumbs ul li {display:inline-block; margin:0; padding:0}
.breadcrumbs ul li a{display:block; padding: 4px 5px 4px 0; color:#818382; font-size:0.75em;}
.breadcrumbs ul li a:after{content:'>'; text-decoration:none; display:inline-block; margin-left:5px;}
.breadcrumbs ul li span{display:block; padding: 4px 5px 4px 0; color:#818382; font-size:0.75em;}

.tags {padding: 40px 0; text-align:center;max-width:1150px;width:100%; margin:0 auto; }
.tags ul {position:relative;}
.tags ul li:before {display:none;}
.tags ul li {display:inline-block; margin:0 0 10px 0; padding:0}
.tags ul li a{display:block; padding: 4px 5px 4px 5px; background:#efefef; border:1px #bbb solid; color:#444; line-height:1em;font-size:0.875em; margin: 0 3px; text-decoration:none; text-transform:uppercase;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } 
.tags ul li a:hover{ background:#1b449c; border:1px #1b449c solid; color:#fff;  } 


.wide-grid {background:#fff}
.wide-grid ul {overflow:auto}
.wide-grid ul li{width:33.3333%; float:left; position:relative}
.wide-grid ul.quint li{width:20%; float:left; position:relative}
.wide-grid ul li img {width:100%; display:block; height:auto;position:relative; z-index:1;}

.wide-grid ul li .href .box-cover {width:100%; height:100%; position:absolute; top:0; left:0; background: rgba(27,68,156,0);z-index:2; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-align:center}
.wide-grid ul li .href:hover .box-cover { background: rgba(27,68,156,0.8); }
.wide-grid ul li .href .box-cover h3 {color:#fff; display:inline-block;margin-top:35%; padding-bottom:10px; font-size:1.25em; text-align:center;opacity:0; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;position:relative; }
.wide-grid ul li .href .box-cover h3:after {display:inline-block; background:#fff; width:0; height:2px; position:absolute; bottom:0; left:50%; content:'';-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.wide-grid ul li .href:hover .box-cover h3:after { width:100%; left:0; transition-delay: .1s}
.wide-grid ul li .href .box-cover p {color:#fff; font-size:0.875em;margin-top:10px; padding:0 10%; line-height:1.45em;text-align:center;opacity:0; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;letter-spacing:1px; position:relative}
.wide-grid ul li .href:hover .box-cover h3 {color:#fff; margin-top:30%; opacity:1}
.wide-grid ul li .href:hover .box-cover p { opacity:1} 
.wide-grid ul li .href .box-cover {color:#fff;text-decoration:none;display:block;}


.generic {padding-top:100px; color:#838182; line-height:1.5em; padding-bottom:30px } 
.generic header {float:right; width:60%; position:relative; background:#fff; box-sizing:border-box;padding-left:10px; position:relative; z-index:1000}
.generic header h2{font-family:LatoLatinWebLight;font-size:3em; padding:50px 0 10px 0;margin-right:120px;line-height:1.15em;}
.generic header h2 span{display:inline-block; position:relative;  } 
.generic header h2 span span{font-family:LatoLatinWeb} 
.generic header h2 span.all {text-transform:uppercase}
.generic header h2 span.all:before{display:inline-block; position:absolute; top:-10px; left:-50px; width:40px; height:3px; background:#3bc1cc; content:''; }
.generic.hyla-active header h2 span.all:before{ background:#17489a;  }
.generic header h3{font-family: LatoLatinWeb;font-size:1.5em;line-height:1.3em; padding:0 20px 15px 0;letter-spacing:1px;color:#3bc1cc}
.generic.hyla-active header h3{font-family: LatoLatinWeb;font-size:1.5em; padding:0 20px 15px 0;letter-spacing:1px;color:#17489a}
.generic header p{font-weight:500; font-size:1em; padding:0 120px 0 0; line-height:1.5em; margin-bottom:15px;}
.generic header ul {margin-bottom:1rem;}
.generic header ul li{font-weight:500; font-size:1em; padding:0 120px 5px 15px; line-height:1.5em;position:relative}
.generic header ul li:before{ position:absolute;height:6px; width:6px;border-radius:3px; background:#1b449c; top:10px; left:0;content:''}
.generic header p a{ color:#838182;}
.generic p strong{ color:#333;}
.basket-area {margin-top:0;padding-top:30px; padding-bottom:55px; position:relative;  }
.basket-area .price-part{  float:left;line-height:1.4em; }
.basket-area .price-part a{ color:#838182; }
.basket-area h4{font-family:LatoLatinWeb; font-size:0.75em; }
.generic header .basket-area p{font-family:LatoLatinWeb; font-size:0.875em; margin-top:1em}
.generic header .basket-area p.note{ font-size:0.75em; margin-top:0.5em; font-style:italic}
.basket-area h4 span{ font-size:2rem;color:#1b449c} 
.generic figure {float:left; width:40%; text-align:center; position:relative; z-index:90; }
.generic section {float:right; width:60%; padding-top:10px;padding-left:10px;position:relative; z-index:999;background:#fff; box-sizing:border-box;} 
.generic section.pushed {padding-top:50px;} 
.generic figure img{height:800px; width:auto;}

.cover{top:0; left:0; position:absolute; background:rgba(255,255,255,0.7); width:100%; height:100%;z-index:1000;opacity:0;-webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.cover.activate{opacity:1;}
.cover img{top:50%; left:50%; position:absolute; width:30px; height:30px; opacity:0.2;margin-left:-15px; margin-top:-15px;}
.basket-area .cover img{top:10px; right:120px; left:auto; position:absolute; width:30px; height:30px; opacity:0.2;margin:0;}

.row-toggle h3{font-family:LatoLatinWebLight;font-size:1.4em; padding:0 0 10px 30px;margin-right:0; text-transform:uppercase;letter-spacing:1px; position:relative; cursor:pointer}
.row-toggle h3:after{ position:absolute; left:0; top:0; content:'+'; font-size:1.4em;}
.row-toggle {}
.row-toggle.active div {  display:block } 
.row-toggle.active h3:after{  content:'–'; }
.row-inner{ margin-right:120px; border-bottom:1px #ccc solid; }
.row-toggle .row-content{  padding-bottom:10px; display:none}
.row-toggle .row-content p { font-weight:500; font-size:1em; padding:0 0 0.5em 30px; line-height:1.5em}
.row-toggle .row-content p img{ max-width:100%; height:auto;}
.row-toggle .row-content ul,.row-toggle .row-content ol { font-weight:500; font-size:1em; padding:0 0 0.5em 30px; line-height:1.5em}
.row-toggle .row-content ol { list-style-type:decimal; margin-left:1rem;}
.row-toggle .row-content ul li{ font-weight:500; font-size:1em; padding:0 0 0 15px; line-height:1.5em; position:relative;}
.row-toggle .row-content ul li:before{ position:absolute;height:6px; width:6px;border-radius:3px; background:#1b449c; top:10px; left:0;content:''}
.row-toggle .row-content p a{ color:#838182;}
.row-toggle .row-content p a:hover{ color:#1b449c;}
.actions ul {margin-right:120px; border-bottom:1px #ccc solid;}
.generic header .actions ul li { font-size:0.75em; display:inline-block; margin-right:1em; cursor:pointer;-webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; padding-left:0;}
.generic header .actions ul li:before {display:none;}
.actions ul li.add-to-favorites { } 
.actions ul li span{ font-size:0.875rem; margin-right:5px;color:#1b449c}
.actions ul li a{color:#838182;text-decoration:none;display:inline-block;}
.actions ul li:hover { color:#1b449c}
.actions ul li a:hover { color:#1b449c;-webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.fas {display:inline-block; }
.field { display:block; width:180px; position:relative; box-sizing:border-box; float:left; border:1px #bbb solid; line-height:55px; height:55px; margin-top:0; margin-right:20px;  }
.field .math-btn{ font-family:arial, sans-serif;height:56px;width:32%;display: block; float:left; font-size:1.115em; line-height:56px;color:#838182; cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none;  -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;text-align:center;font-weight:300;} 
.field .math-btn:hover{font-weight:500;}
.field .value{font-family:LatoLatinWeb, sans-serif; height:52px;width:33%;display: block; margin:0;outline:0; float:left;font-size:1.2em;  line-height:42px; padding-top:0;padding-bottom:0;color:#838182; border:0; background:transparent;text-align:center}
.field .value:focus{  outline:0; border:0; }
.action-yellow{ width:300px; box-sizing:border-box;border:0; background:#1b449c; color:#fff; height:55px; line-height:55px;  font-size:1em;display:block; float:left; margin-top:0; text-align:center; text-decoration:none;cursor:pointer }
.action-yellow.flexible{ width:100%; float:none;clear:both;}
.action-yellow.right{float:right; margin-bottom:20px; margin-top:10px;}
.action-yellow span{display:block;position:relative}
.action-yellow span:after{position:absolute; top:0; left:0; width:100%; height:100%; border:2px rgba(0,0,0,0.4) solid; content:'';box-sizing:border-box;opacity:0;-webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.action-yellow span:after{position:absolute; top:0; left:0; width:100%; height:100%; border:2px rgba(0,0,0,0.4) solid; content:'';box-sizing:border-box;opacity:0;-webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.action-yellow span:hover:after{opacity:1;}

.back-link {margin-top:-6px; margin-bottom:16px; z-index:100}
.back-link a{ color:#000; text-decoration:none;font-size:0.75rem;}

.form-column {width:50%; float:left;  margin-bottom:20px;}
.form-column p {line-height:1.5em; font-size:0.875em; padding: 0 0 1em 0; color:#666;}
.form-column .error p {line-height:1.5em; font-size:0.875em; padding: 5px 0 0 0; color:#666;}
.form-column .form-holder {padding:0 0 20px 20px ; margin-left:20px; border-left:1px #ddd solid; min-height:450px;}
.form-column fieldset { margin-bottom:20px;overflow:hidden}
.form-column fieldset p {color:#999}
.form-column fieldset input[type=checkbox] {border:1px #999 solid;}
.form-column fieldset p a{color:#999}
.form-column fieldset { width:100%; position:relative; margin-bottom:10px;}
.form-column fieldset.medium  { width:64%;margin-right:1%; float:left;}
.form-column fieldset.tiny  { width:17%;margin-right:1%; float:left;}
.form-column fieldset.tiny.last  { width:17%; margin-right:0; margin-left:0; float:left;}
.form-column fieldset.short  { width:25%;margin-right:2%; float:left;}
.form-column fieldset.short-filler { width:73%; float:left;}
.form-column fieldset label{display:block;  box-sizing:border-box; position:absolute; top:22px; left:10px; font-size:0.875em; color:#999;-webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; transform-origin:0 0;pointer-events:none;}
.form-column fieldset.error-label label,.form-column fieldset.error-label p,.form-column fieldset.error-label p a,.form-column .form-holder fieldset.error-label label.on{color:#d22815}
.form-column fieldset.green-label label,.form-column fieldset.green-label p,.form-column fieldset.green-label p a,.form-column .form-holder fieldset.green-label label.on{color:#999}
.form-column fieldset.green-label .radio-holder label,.form-column .form-holder fieldset.green-label .radio-holder label.on{color:#999}
.form-column fieldset label.on{ top:9px; left:10px; color:#000; transform:scale(0.8)}
.form-column fieldset.green-label label.on{ color:#999; }
.form-column fieldset .input-holder{ width:100%; box-sizing:border-box;}
.form-column fieldset .input-holder input{ width:100%;  box-sizing:border-box; border:1px #ddd solid; height:55px; padding: 27px 10px 10px 10px; font-size:0.875em; }
.form-column fieldset .input-holder textarea{ width:100%;  box-sizing:border-box; border:1px #ddd solid; height:155px; padding: 27px 10px 10px 10px; font-size:0.875em;font-family:LatoLatinWeb, sans-serif; }
.form-column fieldset .input-holder input.on{box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2); border:1px #aaa solid;  }
.form-column fieldset .input-holder textarea.on{box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2); border:1px #aaa solid;  }
.form-column h2 {padding: 10px 0;font-family:LatoLatinWebLight;font-size:1.5em; line-height:1.15em; }

.disable{pointer-events:none; opacity:0.5}
.form-row{width:100%; overflow:auto;}
.form-row .label{width:40%; float:left;line-height:1.5em; font-size:0.875em; padding:0.5em 0; color:#666;}
.form-row .value-holder{width:60%; float:left;line-height:1.5em; font-size:0.875em; padding:0.5em 0;}
.form-row .label.total{ font-size:1.5em; padding:0.5rem 0;  color:#1b449c}

.delivery-message { }
.delivery-message p {display:none;line-height:1.5em; font-size:0.875em; padding: 5px 0 0 0; color:#666;}

.radio-holder { border:1px #ddd solid;overflow:auto;box-sizing:border-box;padding:17px 10px 17px 74px ; position:relative; }
.radio-holder.cash {margin-bottom:10px;}
.radio-holder.dpd { }
.radio-holder:before { position:absolute; left:0; top:0; width:55px; height:100%; content:'';border-right:1px #ddd solid; }
.radio-holder.dpd:before, .green-label .radio-holder.dpd:before { background: url(icons/ico_dpd.png) 9px center no-repeat;}
.radio-holder.dhl:before, .green-label .radio-holder.dhl:before { background: url(icons/ico_dhl.png) 9px center no-repeat;}
.radio-holder.inpost-p:before, .green-label .radio-holder.inpost-p:before { background: url(icons/inPost_logo_.png) 9px center no-repeat; background-size: auto 40px;}
.green-label .radio-holder.dpd:before, .green-label .radio-holder.dpd:before { background: url(icons/ico_dpd.png) 9px center no-repeat;}
.green-label .radio-holder.dhl:before, .green-label .radio-holder.dhl:before { background: url(icons/ico_dhl.png) 9px center no-repeat;}
.green-label .radio-holder.inpost-p:before, .green-label .radio-holder.inpost-p:before { background: url(icons/inPost_logo_.png) 9px center no-repeat; background-size: auto 40px;}
.radio-holder.cash:before, .green-label .radio-holder.cash:before { background: url(icons/ico_cash.png) 9px center no-repeat;}
.radio-holder.wired:before, .green-label .radio-holder.wired:before { background: url(icons/ico_card.png) 9px center no-repeat;}
.green-label .radio-holder.cash:before, .green-label .radio-holder.cash:before { background: url(icons/ico_cash.png) 9px center no-repeat;}
.green-label .radio-holder.wired:before, .green-label .radio-holder.wired:before { background: url(icons/ico_card.png) 9px center no-repeat;}

.point-selected-wrapper {clear:both;}
.radio-holder .point-selected-wrapper {padding-left:10px; font-size:0.875em;color:#666;}
.point-selected-wrapper p {padding-top:10px;}
.point-selected-wrapper p i {cursor:pointer}

.radio-message-wrapper {clear:both;}
.radio-holder .radio-message-wrapper {padding-left:10px; font-size:0.875em;color:#666;}
.radio-message-wrapper p {padding-top:10px;}
.radio-message-wrapper p i {cursor:pointer}

.error-label .radio-holder.cash:before { background: url(icons/ico_cash.png) -41px center no-repeat;}
.error-label .radio-holder.wired:before { background: url(icons/ico_card.png) -41px center no-repeat;}
.error-label .radio-holder.dpd:before { background: url(icons/ico_dpd.png) -41px center no-repeat;} 
.error-label .radio-holder.dhl:before { background: url(icons/ico_dhl.png) -41px center no-repeat;}
.error-label .radio-holder.inpost-p:before  { background: url(icons/inPost_logo_.png) -35px center no-repeat; background-size:auto 40px ;}
.form-column fieldset .radio-holder label {float:left; height:20px; line-height:20px; padding-left:10px; font-size:0.875em;box-sizing:border-box; position:relative;top:auto; left:0;}
.radio-holder .dummy-radio {float:left; width:20px;height:20px; border:1px #bbb solid;box-sizing:border-box; position:relative; cursor:pointer; border-radius:12px;}
.form-column fieldset.green-label .error p{float:none;clear:both; color:#d22815}
.radio-holder .dummy-radio span{ position:relative; display:block;width:20px;height:20px;transform:scale(0);-webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.radio-holder .dummy-radio.checked span{transform:scale(1)}
.radio-holder .dummy-radio span:before{ position:absolute; display:block;width:12px;height:12px; border-radius:6px;background:#999;content:''; left:50%; top:50%; margin-left:-7px; margin-top:-7px;  } 

.dummy-select { display:block; float:left;width:302px; position:relative; box-sizing:border-box; border:1px #bbb solid; line-height:55px; cursor:pointer; margin-bottom:10px;}

.dummy-selected {  height:55px; line-height:55px; letter-spacing:1px; padding: 0;white-space: nowrap;} 
.dummy-selected span{display:block; overflow:hidden; padding: 0 10px;} 
.dummy-options {position:absolute;left:-1px; top:55px; line-height:1em;  letter-spacing:1px; padding: 0; box-sizing:border-box;  width:302px; white-space: normal;background:#fff;  border:1px #bbb solid;display:none;z-index:10000}
.dummy-option{  height:35px; line-height:35px; letter-spacing:1px; padding:0 10px} 
.dummy-option:hover{ background:#eee} 
.dummy-option.selected{ background:#eee} 
.arrow-down{ height:55px; line-height:35px; position:absolute; right:0; top:0;}
.arrow-down span{ height:55px; width: 65px;line-height:55px; position:relative; display:block; text-align:center; cursor:pointer; overflow:hidden;background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(33%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );}
.dummy-select .arrow-down span:after{  position:absolute; top:0; left:10px; width:65px;content:'>'; font-size:1.6em; transform:rotate(90deg) scaleY(1.8);font-family: LatoLatinWeb, sans-serif; font-weight:300;display: block;}
.dummy-select.open .arrow-down span:after{  position:absolute; top:0; left:10px; width:65px;content:'>'; font-size:1.6em; transform:rotate(-90deg) scaleY(1.8);font-family: LatoLatinWeb, sans-serif; font-weight:300;display: block;}

footer{  background:#f7f8f9; position:relative; z-index:2; padding-top:50px;}
footer ul.main-footer{width:98%; max-width:1150px; margin:0 auto;overflow:auto;}
footer ul.main-footer li {display:block; width:25%; float:left; margin-bottom:0.5em;}
footer ul.main-footer li a {display:block; color:#3f3f3f; text-decoration:none;}
footer ul.main-footer li span a {display:block; color:#1e1e1e; text-decoration:none;    font-weight: 700;}
footer ul.main-footer li span{display:inline-block; font-size:1em; font-weight:700; color:#1e1e1e; position:relative; padding: 0 0 15px 0; margin-bottom:10px }
footer ul.main-footer li span:after{display:inline-block; background:#1b449c; width:100%; height:2px; position:absolute; bottom:10px; left:0; content:'';}
footer ul.main-footer li:nth-child(1) {display:block; width:10%; }
footer ul.main-footer li:nth-child(2) {display:block; width:25%; }
footer ul.main-footer li:nth-child(3) {display:block; width:20%; }
footer ul.main-footer li:nth-child(4) {display:block; width:20%; }

footer ul.main-footer li ul li {display:block; width:100%; box-sizing:border-box; padding-right:1.5rem}
footer ul.main-footer li ul li:nth-child(1) {display:block; width:100%; }
footer ul.main-footer li ul li:nth-child(2) {display:block; width:100%; }
footer ul.main-footer li ul li:nth-child(3) {display:block; width:100%; }
footer ul.main-footer li ul li:nth-child(4) {display:block; width:100%; }
footer ul.main-footer ul li ,footer ul.main-footer ul li:nth-child(3) ,footer ul.main-footer ul li:nth-child(2)  ,footer ul.main-footer ul li:nth-child(1) {display:block; width:100%; float:none; }
footer ul.main-footer ul li {vertical-align:top;  float:none;}
footer ul.main-footer ul li a{ font-size:0.875em; line-height:1.4em;}
footer ul.main-footer ul li a:hover{ color:#000}
footer ul.main-footer li p {padding: 0 10px 10px 0;font-size:0.75em;line-height:1.5em;}
footer ul.main-footer li p a{ color:#1b449c}
footer ul.main-footer li strong { font-size:1.5em; color:#1b449c}
footer .copy { border-top:1px #ddd solid; margin-top:40px}
footer .copy p{padding: 10px 30px 30px 0;font-size:0.75em;line-height:1.5em;}


 
/*/ cookies /*/ 
.cookie-consent-banner {width:100%;height:100vh; bottom:auto; position:fixed; top:0; left:0; overflow-y:auto; box-shadow:none; max-height:100%; padding:0; background:transparent;z-index:2000000; box-sizing:border-box; line-height:1.45em;}
.cookie-consent-banner h3{ font-size:1.5em; font-weight:300; padding-bottom:1rem}
.cookie-consent-banner p{ font-size:0.875em; font-weight:300; padding:0 0 1rem 0 ;}
.cookie-consent-banner p a{ color:#444;}
.cookie-consent-banner p.follow-up{padding:1rem 0 0 0 ;}
.cookie-consent-banner ul { padding:0 0 0.5rem 0 ;}
.cookie-consent-banner ul li{ line-height: 1.5em;font-size:0.875em; font-weight:300; padding:0 0 0.5rem 1.5rem ;position:relative;}
.cookie-consent-banner ul li:before{background:#777; height:1px; width:1rem; position:absolute; left:0; top:9px; content:'';}
.cookie-consent-wrapper {position:relative;}
.cookie-consent-close {position:absolute; top:10px; right:10px; cursor:pointer}
.cookie-consent-close span{display:block; width:20px; height:20px; position:relative;}
.cookie-consent-close span:before{ width:20px; height:3px; position:absolute; top:10px; left:0; transform:rotate(45deg); content:''; background:#888}
.cookie-consent-close span:after{ width:20px; height:3px; position:absolute; top:10px; left:0; transform:rotate(-45deg); content:''; background:#888}
.cookie-consent-banner button { background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; }
.cookie-consent-banner button.cookie-consent-button { font-size:1rem; font-weight:300;  padding: 1rem; color:#fff;  border: 1px #fff solid; background: #1b449c; border-radius:0; display:inline-block; margin-right:5px;margin-bottom:5px;}
.cookie-consent-banner button.cookie-consent-button.btn-grayscale { padding: 1rem; color:#444;  border: 1px #888 solid; background:transparent; border-radius:0; display:inline-block; margin-right:5px}
.cookie-consent-banner button.cookie-consent-button:hover { background:#000;border: 1px #000 solid; }  
.cookie-consent-banner button.cookie-consent-button.btn-grayscale:hover { background:#eee} 
.cookie-consent-options { font-weight:300; padding:1rem; background:#badaf3; margin-top:1rem;font-size:0.875rem; }
.cookie-consent-options label{display:inline-block; margin-right:0.5rem;color:#444}
.cookie-consent-options div{display:inline-block; margin-right:0.5rem;color:#444}
.cookie-consent-options label input {display:inline-block; margin-right:0.5rem;}

.cookie-consent-table {width:100%;height:100%; display:table; }
.cookie-consent-cell {width:100%;height:100%; display:table-cell; text-align:center; vertical-align:middle; }
.cookie-consent-wrapper {width:60%; overflow-y:auto;background:#e2effa;text-align:left;  color:#444;box-sizing:border-box; padding:2rem;display:inline-block;box-shadow:0 0 10px rgba(0,0,0,0.4);}

	
.cookies-settings {width:100%; padding:0; background:#e2effa;}
.cookies-settings p{ padding:1rem ; color:#6d7b87; cursor:pointer;display:inline-block;}

.cookie-consent-banner button.cookie-consent-button { -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

.checkbox-socket{ font-size:0.875rem; line-height:1.5rem; cursor:pointer; } 
.checkbox-socket.error-label{ } 
.checkbox-socket span{ width:1rem; height:1rem; border:1px #888 solid; display:inline-block; margin-right:10px;transform:translateY(0.25rem); position:relative; background:#888; }
.checkbox-socket.error-label span{ border:1px #d64b29 solid;  }
.checkbox-socket.green-label {color:#000; }
.checkbox-socket.green-label span{ border:1px #888 solid;  }
.checkbox-socket span:before{ width:1rem; height:1rem; position:absolute; top:0; left:0; background:url(images/check.svg) center center no-repeat; background-size:100% auto; content:''; transform:scale(0); transition: all 0.2s ease-out;z-index:10;}
.checkbox-socket span:after{ width:1rem; height:1rem; position:absolute; top:0; left:0; background:#ffffff; background-size:100% auto; content:''; transform:scale(1); transition: all 0.2s ease-out;z-index:9;}
.checkbox-socket.checked {color:#000; }
.checkbox-socket.checked span{  border:1px #888 solid; }
.checkbox-socket.checked span:before { transform:scale(1);}
.checkbox-socket.checked span:after{ transform:scale(0);}
.checkbox-socket.disabled{pointer-events:none; opacity:0.5}

@-webkit-keyframes rotating  { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
.rotating {display:inline-block; text-align:center; -webkit-animation: rotating 1s linear infinite; -moz-animation: rotating 1s linear infinite; -ms-animation: rotating 1s linear infinite; -o-animation: rotating 1s linear infinite; animation: rotating 1s linear infinite; }

.mobile{display:none;}
.tablet{display:none;}

@media (max-width: 1160px) {
	.wide-grid ul li{width:50%; }
	.quart li { width: 48%; margin-left: 1%; margin-right: 1%; }
	.wider-message p, .wider-message-image p, .wide-message p { margin:0 }
}
@media (max-width: 1100px) {
	
	.main-header nav{float:none; position:absolute; top:40px; right:0; } 
	.main-header.small nav{ top:40px; background:rgba(255,255,255,1)} 
	.main-header nav ul{float:right;} 
	.main-header .sub-menu-holder {left:auto; right:0; top:40px}
	.main-header nav ul li .sub-menu-holder ul li {text-align:right;} 
	 .main-header nav ul li a {line-height:40px;}
	.main-header .functional ul li {line-height:40px;}
	.main-header .functional ul li span{line-height:40px;}
	.main-header .functional ul li span:before{line-height:40px;}
	
	.main-header nav ul li a span:after{ bottom:0;}  
	.main-header.small { height: 80px; }
	.main-header.small h1 a{ width:200px; height:80px; background:url(icons/DP.Dermaceuticals.svg) 0 8px no-repeat; background-size:120px auto;  } 
	.main-header .functional ul li .drop-holder {top:40px;}
	
	.main-header nav{position:relative;top:auto; width:100%;}
	.functional{float:none; position:absolute; top:0; right:0;}
	.main-header, .main-header.small {height:auto;}
	.menu-holder,.main-header nav ul{float:none; }
	.main-header nav ul li {display:block;}
	.main-header  {position:relative; top:auto; left:auto;}
	.main-header h1 {float:none; }
	.main-header.small nav {top:0;height:auto;}
	#nav{display:none;}
	.sub-menu-holder{top:0; display:block;}
	.main-header .sub-menu-holder{position:relative; top:auto; display:block;left:auto;right:auto;width: 100%; background:transparent }
	.main-header.small .sub-menu-holder{position:relative; top:auto; display:block;left:auto;right:auto;width: 100%; background:transparent }
	.main-header nav ul li .sub-menu-holder ul li{text-align:left;}
	.main-header nav ul li .sub-menu-holder ul li{padding-left:20px;}
	.menu-trigger{display:block; position:absolute; right:7px; top:43px; cursor:pointer; width:40px; height:23px; z-index:10000000; } 
	.menu-trigger .b{display:block; width:32px; height:23px;  position:relative;} 
	.menu-trigger .b:before{display:block; width:32px; height:3px;  position:absolute; top:0; left:0; content:''; background:#000;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} 
	.menu-trigger .b:after{display:block; width:32px; height:3px;  position:absolute; bottom:0; left:0; content:''; background:#000;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} 
	.menu-trigger .b .c{display:block; width:32px; height:23px; position:relative; } 
	.menu-trigger .b .c:before{display:block; width:32px; height:3px;  position:absolute; top:10px; left:0; content:''; background:#000;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } 
	.menu-trigger .b .c:after{display:block; width:32px; height:3px;  position:absolute; top:10px; left:0; content:''; background:#000;-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } 
	.menu-trigger.on .b .c:before{transform:rotate(45deg) } 
	.menu-trigger.on .b .c:after{transform:rotate(-45deg) } 
	.menu-trigger.on .b:before{opacity:0;} 
	.menu-trigger.on .b:after{opacity:0;} 
	.tablet{display:block;}
	.generic{padding-top:20px;}
}
@media (max-width: 960px) {
	
	.cookie-consent-banner {width:100%;height:100vh;}
	.cookie-consent-wrapper {width:70%; }
}
@media (max-width: 860px) {
	.single .field {float:none; clear:both; }
	.single .action-yellow {float:none; clear:both; margin-top:10px;}
	footer ul.main-footer { width:96%; } 
	footer ul.main-footer li {width:100%; float:none;}
	footer ul.main-footer li a{padding:0 15px;}
	footer ul.main-footer li p {padding:0 15px;}
	footer ul.main-footer li p a,footer ul.main-footer li span a{padding:0 0;}
	footer ul.main-footer li:nth-child(1) {width:100%; float:none;}
	footer ul.main-footer li:nth-child(2) {width:100%; float:none;}
	footer ul.main-footer li:nth-child(3) {width:100%; float:none;}
	footer ul.main-footer ul li ,footer ul.main-footer ul li:nth-child(3) ,footer ul.main-footer ul li:nth-child(2)  ,footer ul.main-footer ul li:nth-child(1) {display:inline-block; width:auto; float:none; }
	.limits {width:96%;}
		
	.generic header p { padding: 0 20px 15px 0;  }
	.generic header h2 {margin-right:20px;}
	.triple li {width:48%;}
	.form-column {width:100%; float:none;  clear:both;}
	.form-column .form-holder {padding:0 0 20px 0 !important; margin-left:0;border:0;}
}
@media (max-width: 825px) {
	.intro-message h2,.intro-message p{margin-left:10%;}
}
@media (max-width: 730px) {
	.generic header,.generic section  {float:none; width:94%; clear:both; margin:0 auto;}
	.generic header h2 {margin-right:20px;padding-top:20px;}
	.generic header h2 span.all:before {left:-3%;}
	.generic figure {float:none; width:94%; clear:both; margin:30px auto 0 auto; }
	.row-toggle h3 {margin-top:10px;}
	.row-inner{ margin-right:20px;}
	.generic section.pushed {padding-top:0;  }
	.blog-section .blog-content { width: 96%;}
	.breadcrumbs ul{ width: 96%;}
	.wide-grid ul li .href .box-cover {width:100%; height:100%; position:absolute; top:0; left:0;  background: rgba(27,68,156,0.7);z-index:2; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-align:center}
	.wide-grid ul li .href .box-cover h3 {color:#fff; display:inline-block;margin-top:30%; padding-bottom:10px; font-size:1.25em; text-align:center;opacity:1; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;position:relative; }
	.wide-grid ul li .href .box-cover h3:after {display:inline-block; background:#fff; height:2px; position:absolute; bottom:0; left:0; content:'';-moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; width:100%; left:0; } 
	.wide-grid ul li .href .box-cover p {color:#fff; font-size:0.875em;margin-top:10px; padding:0 10%; line-height:1.45em;text-align:center;opacity:1; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;letter-spacing:1px; position:relative}  
}
@media (max-width: 670px) {
	.triple li {width:98%;}
	.cookie-consent-banner {width:100%;height:100vh;}
	.cookie-consent-wrapper {width:100%; height:100vh;} 
}
@media (max-width: 650px) {
	.wide-grid ul li{width:70%;margin-left:15%; margin-bottom:30px; } 
	.wide-grid ul.quint li {width:50%;margin-left:25%;}
	.quart li { width: 98%; margin-left: 1%; margin-right: 1%; }
	
	.wider-message.generic.intro{padding-top:20px;}
	.mobile{display:block;}
	.sub-menu-holder {display:block;}
}
@media (max-width: 550px) {
	.intro-message h2 {font-size:2em; }
	.intro-message h2,.intro-message p{ padding:20px 20px 20px 20px }
	.field {float:none; clear:both;}
	.action-yellow {float:none; clear:both; margin-top:15px;}
	.cookie-consent-banner {bottom:auto; top:0; max-height:100%}
	.cookie-consent-banner button.cookie-consent-button {width:100%; font-size:0.875rem; }
	.cookie-consent-banner h3 { padding-bottom:0.5rem;font-size:1rem}
	.cookie-consent-banner p, .cookie-consent-banner ul li { padding-bottom:0.5rem;font-size:0.75rem}
	.cookie-consent-button { padding-bottom:0.5rem;font-size:0.75rem}
}
@media (max-width: 500px) {
	.main-header nav ul li:first-child {display:none;}
	.main-header h1,.main-header h1 a { width:150px;  } 
	.wide-grid ul li{width:100%;margin-left:0; margin-bottom:0; }
	.wide-grid ul.quint li {width:100%;margin-left:0;}
}
@media (max-width: 465px) {
	.intro-message h2{font-size:1.65em; }
	.intro-message p{font-size:1em; }
	.intro-message h2,.intro-message p{ padding:10px 10px 10px 10px }
	.intro-message a {padding-top:50px;}
}
@media (max-width: 360px) {
	.main-header nav ul li a {padding:0 10px;}
}