/* ==========================================================================
   FONTS
   ========================================================================== */

@import url('https://fonts.cdnfonts.com/css/heuristica');

@font-face {
    font-family: 'Heuristica Regular';
    src: url('../fonts/Heuristica-Regular.woff') format('woff');
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 130%;
    color: #333;
    text-align: center;
}

/* Typography */
h1, h2 {
    font-weight: 300;
    text-align: center;
}

h3 {
    font-size: 22px;
}

h4 {
    margin: 20px 0 10px;
    line-height: 24px;
    font-weight: 400;
    text-align: left;
}

h6 {
    margin: 10px 0;
    line-height: 18px;
    font-weight: bold;
}

p {
    margin-bottom: 10px;
}

li {
    padding-top: 5px;
}

a {
    text-decoration: none;
}

/* ==========================================================================
   LAYOUT COMPONENTS
   ========================================================================== */

/* Header & Navigation */
.webtitle {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: #fff;
}

.menubar {
    position: fixed;
    top: 43px;
    width: 100%;
    z-index: 1001;
    padding: 6px 0;
    background-color: #2f2f2f;
    text-align: center;
    transition: top 0.3s ease-in-out;
}

.menuhor {
    color: white;
    padding-left: 10px;
    font-weight: 300;
}

.menuhor:hover {
    color: orange;
    text-decoration: none;
}

.menuhor:active {
    color: lightgray;
    font-weight: bold;
}

.menuhor.menu-active,
.menuhor.menu-active:hover {
    color: #e1c911;
}

/* Content Layout */
.contentdiv {
    display: inline-block;
    width: 900px;
    text-align: center;
}

.contentdiv.direct {
    margin-top: 0;
}

.contentminheight {
    min-height: 410px;
}

.separador {
    height: 43px;
    margin-top: 0;
}

.separador.mid {
    height: 30px;
}

.separador.bigspace {
    height: 87px;
}

/* ==========================================================================
   CONTENT BLOCKS
   ========================================================================== */

/* Text Blocks */
.parrafo {
    padding: 5px 10px;
    line-height: 165%;
    font-weight: 300;
    text-align: left;
}

.parrafo.centered {
    text-align: center;
}

.intropage {
    margin: 0;
    font-size: 16px;
    line-height: 150%;
    font-weight: 300;
    text-align: center;
}

.default.h1 {
    margin-top: 0;
    background-color: hsla(0, 0%, 100%, 0.7);
    font-family: 'Open Sans', sans-serif;
    font-size: 21px;
    line-height: 30px;
    font-weight: 300;
}

/* Column Layouts */
.colblock {
    display: inline-block;
    width: 30%;
}

.colblock.sidecoll {
    margin: 0 5px 0 0;
}

.coldiv {
    display: inline-block;
    max-width: 33%;
}

.centralcol {
    display: inline-block;
    width: 100%;
}

/* Two Column Application */
.twocolapplication {
    display: flex;
    text-align: left;
    margin-bottom: 10px;
}

.listblockleft {
    width: 27%;
    padding-right: 5px;
    flex: 0 0 auto;
}

.listblockleftwire {
    width: 40%;
}

.listblockright {
    flex: 0 0 auto;
    border-left: 1px solid #979797;
}

/* ==========================================================================
   TABLE COMPONENTS
   ========================================================================== */

.columnhblock {
    height: 32px;
    border: 1px solid #a8a8a8;
    border-bottom: none;
    line-height: 28px;
}

.columnhblock.chead {
    height: 75px;
    border-top-width: 5px;
}

.columnhblock.chead.typea {
    border-top-color: #e5c776;
    color: #e5c776;
}

.columnhblock.chead.typeb {
    height: 100%;
    border: none;
    border-left: 1px solid #99baff;
    border-right: 1px solid #99baff;
    color: #d36f4f;
}

.columnhblock.chead.typec {
    border-top-color: #92c1c0;
    color: #92c1c0;
}

.columnhblock.lrow {
    border: 1px solid #a8a8a8;
}

.columnhblock.lrow.morinfoc {
    background-color: rgba(146, 193, 192, 0.2);
}

.columnhblock.lrow.moreinfoc {
    background-color: rgba(211, 111, 79, 0.2);
}

.columnhblock.lrow.moreinfoa {
    background-color: rgba(229, 199, 118, 0.2);
}

.columnhblock.lowband {
    border-top-width: 0;
    font-size: 13px;
}

.columnhblock.topband {
    border-top: none;
    border-left: 1px solid #a8a8a8;
    border-right: 1px solid #a8a8a8;
    font-size: 30px;
}

.columnhblock.cgrayed {
    background-color: #fafafa;
}

.intable {
    width: 100%;
    color: #333;
    text-decoration: none;
}

.colheader {
    font-size: 22px;
    margin: 0;
    font-weight: 400;
}

.incrow {
    padding-left: 5px;
    font-weight: 300;
}

.exrow {
    color: lightgray;
}

/* ==========================================================================
   IMAGES
   ========================================================================== */

.headimage {
    display: inline-block;
    width: 300px;
    margin: 30px 0 25px 0;
    text-align: center;
}

.bigimage {
    max-width: 800px;
}

.lateralimg {
    display: block;
    width: 400px;
    margin-left: 5px;
    padding: 0;
    float: right;
}

.lateralimagewide {
    width: 100%;
}

.cbdbeverage {
    width: 500px;
}

.cbd-bioavailability-chart-nanocbd {
    width: 650px;
}

.footerimage {
    display: inline-block;
    text-align: center;
    width: 200px;
}

.coldivimg {
    max-width: 100%;
}

.footerimg {
    max-width: 100%;
}

.fullheadimg {
    max-width: 100%;
}

.halfsize {
    display: inline-block;
    max-width: 500px;
}

.topimage {
    margin-top: -8px;
}

.triarrow {
    width: 470px;
}

.ticker {
    margin-top: -7px;
}

.mobileimage {
    display: block;
}

.topdiv {
    /* margin-top: -11px; */
    background: #b1e8e6;
	color: black;
    position: absolute;
    display: block;
    width: 100%;
}

.topdiv h1 {
  padding: 0px;
  margin: 14px;
}

/* ==========================================================================
   LISTS
   ========================================================================== */

.listhead {
    margin: 15px 0 3px;
}

.listhead.listsubs {
    padding-left: 0;
}

.listcomment {
    margin-left: 25px;
}

.list-item {
    padding-left: 40px;
    background: url('../images/CBD-Quality-check.png') 10px 41% no-repeat;
    background-size: 17px;
    list-style-type: none;
}

.list-item-squared {
    margin-left: 35px;
    list-style-type: square;
}

.list-item-rounded {
    margin-left: 35px;
    list-style-type: disc;
}

.list-item-boxed {
    margin-left: 35px;
    list-style-type: georgian;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form {
    display: inline-block;
}

.formtextfield {
    display: block;
    width: 250px;
    font-size: 15px;
    font-weight: 300;
    text-align: center;
}

.formsuccess {
    background-color: transparent;
    font-size: 17px;
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */

.accrdion-header {
    background-color: #6f6f6f;
    border-bottom: 1px solid #fafafa;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-align: left;
}

.accrdion-header:hover,
.accrdion-header-opened {
    background-color: #e1c911;
}

.accrdion-content {
    padding: 0.5rem 1rem;
}

/* ==========================================================================
   READ MORE/LESS
   ========================================================================== */

.addReadMore .SecSec,
.addReadMore .readLess {
    display: none;
}

.addReadMore .readMore,
.addReadMore .readLess {
    font-weight: bold;
    margin-left: 2px;
    color: blue;
    cursor: pointer;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.hide {
    display: none;
}

.footer {
    margin-top: 20px;
}

.packs {
    font-size: 20px;
}

.tophead {
    font-size: 21px;
}

.pagetitle {
    font-weight: bold;
}

.proman {
    font-family: 'Heuristica Regular', serif;
}

.vdivider {
    border-right: 1px none #000;
    border-left: 1px none #8f8f8f;
}

.divanim {
    display: inline-block;
}

.servicelink {
    color: #333;
}

.ColVerDetalles {
    font-weight: 300;
    color: darkgray;
    line-height: 50px;
}

/* ==========================================================================
   EMAIL/CONTACT OBFUSCATION
   ========================================================================== */

span#emaildomain::after { content: "\0040 inteltur.es"; }
span#emailname::before { content: "info"; }
span#locker, span#lockermail { display: none; }
span#te::after { content: "08.83.64"; }
span#tepre::before { content: "633."; }
span#ps::after { content: "Sörensen"; }
span#pspre::before { content: "Peter "; }
span#psdomain::after { content: "\0040 inteltur.es"; }
span#psema::before { content: "psorensen"; }

/* ==========================================================================
   RESPONSIVE DESIGN - TABLET
   ========================================================================== */

@media (max-width: 991px) {
    h1, h2, .default.h1 {
        font-size: 21px;
    }
    
    h4 {
        font-size: 18px;
    }
    
    h6 {
        font-size: 13px;
    }
    
    .parrafo {
        padding: 10px 0 0 10px;
        line-height: 130%;
    }
    
    .contentdiv {
        width: 100%;
        margin-top: 0;
        padding: 0 3px;
    }
    
    .lateralimg {
        width: 500px;
    }
    
    .colblock {
        width: 32%;
    }
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE
   ========================================================================== */

@media (max-width: 490px) {
    /* Base Typography - All increased by 25% */
    body {
        font-size: 1.875rem !important; /* 1.5rem * 1.25 = 1.875rem */
    }
    
    h1, h2 {
        font-size: 2.125rem; /* 1.7rem * 1.25 = 2.125rem */
    }
    
    h3 {
        font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
        line-height: normal;
    }
    
    h4 {
        font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
    }
    
    h6 {
        font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
    }
    
    p {
        font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
        line-height: 1.5; 
    }
    
    /* Layout Adjustments */
    .default.h1 {
        font-size: 1.328125rem; /* 1.0625rem * 1.25 = 1.328125rem */
        line-height: 1.5;
    }
    
    .default.h1.headh1 {
        height: 55px;
    }
    
    .parrafo {
        padding: 5px 0 0 5px;
        line-height: 1.6; 
    }
    
    .contentdiv {
        margin-top: 0;
        font-size: 1.75rem; /* 1rem * 1.25 = 1.25rem */
    }
    
    .intropage {
        padding: 0 10px;
        font-size: 1.328125rem; /* 1.0625rem * 1.25 = 1.328125rem */
    }
    
    /* Navigation */
    .menubar {
        font-size: 2rem; /* 1.6rem * 1.25 = 2rem */
        padding: 10px 7px 10px 7px;
        /* height: 92px; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
		line-height: 2.75rem; /* 2.2rem * 1.25 = 2.75rem */
    }
    
    .menuhor {
        line-height: 1.4;
        padding: 0 5px;
    }
    
    /* Images */
    .lateralimg {
        width: 96%;
        float: none;
        padding-bottom: 15px;
    }
    
    .headimage {
        width: 280px;
        margin: 40px 0 20px 0;
    }
    
    .footerimage {
        max-width: 130px;
        margin-left: -18px;
    }
    
    .topimage {
        margin-top: 0;
    }
    
    .triarrow {
        width: 70%;
    }
    
    .cbd-bioavailability-chart-nanocbd,
    .halfsize {
        width: 100%;
        max-width: 100%;
    }
    
    .mobileimage {
        display: none;
    }
    
    .logo-btc {
        max-width: 200px;
        float: right;
    }
    
    /* Layout Changes */
    .separador.bigspace {
        height: 146px;
    }
    
    .colblock {
        display: inline-block;
        width: 90%;
        padding-bottom: 10px;
    }
    
    .coldiv {
        width: 31%;
    }
    
    .twocolapplication {
        display: block;
    }
    
    .listblockleft,
    .listblockright {
        width: 100%;
    }
    
    /* Text Adjustments */
    .packs {
        font-size: 1.328125rem; /* 1.0625rem * 1.25 = 1.328125rem */
    }
    
    .pagetitle {
        text-align: left;
        font-weight: normal;
		font-size: 2rem; /* 1.6rem * 1.25 = 2rem */
    }
    
    .footertext {
        font-size: 1.25rem; /* 1rem * 1.25 = 1.25rem */
        line-height: 1.4;
    }
    
    .columnhblock {
        font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
    }
    
    /* Utility */
    .supportbatch {
        display: none;
        overflow: visible;
        margin: 0;
    }
    
    .nav-menu {
        margin-top: 0;
    }

	.accrdion-entry {
		font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
	}

	.accrdion-content {
	}

	.accrdion-content p {
		font-size: 1.75rem; /* 1.4rem * 1.25 = 1.75rem */
	}

}