@charset "utf-8";
/* CSS Document */

body {
	
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 1px;
	}
p {
	font-size: 1rem;
	letter-spacing: 1px;
}

* {box-sizing: border-box;}

h1, h2, h3, h4, strong {
    font-weight: 700;
	font-family: 'Jura', sans-serif;
}

img {
    max-width: 100%;
}

/* ==================
    Typography
===================== */

h1, h2, h5, strong {
    font-weight: 700;
}
h3 {
	text-transform: capitalize;
	font-size: 1.5rem;
}
h4 {
	font-size:1.3rem;
	margin:0px;
	color: #005100;
	text-align: center;
	text-transform: uppercase;
}
@media (min-width:600px) {
	h4 {
	text-align: left;	
	}
	
}
h5 {
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	margin:0px;
	font-size: 1.25rem;
}

.question {
	text-align: left;
	font-size: 1.2rem;
	color: #005100;
	font-weight: 500;
}
.question::after {
	content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #00CC00;
    margin-top: 15px;
    margin-left: 0px;
}

.accent-color {
    color: #00CC00;
}

.page-title,
.subtitle {
    grid-column: 2 / -2;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    margin-bottom: .5em;
    justify-self: center;
	color: #404040;
}

.page-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 30px;
    background-color: #00CC00;
    margin-top: -40px;
    margin-left: 15px;
}

.subtitle {
    margin: .5em 0 3em;
    font-size: 1.125rem;
	color: #292929; 
}

.hero-title {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 0;
}
@media (max-width:600px){
	.hero-title {
    font-size: 1.125rem;
	}
}

.hero-subtitle {
    font-size: 1.125rem;
	margin-bottom: 0; 
}
.hero-subtitle2 {
	font-size: 1.125rem;
	margin-bottom: 1em;
}

@media (max-width:600px){
	.hero-subtitle {
    font-size: 1rem;
	padding-bottom: 1em;
	font-weight:500;
	}
}
.section-title {
    font-size: 1.25rem;
    color: #404040;
    margin-top: 1.25em;
	text-transform: uppercase;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 5px;
    margin-top: 20px;
    background: #00CC00;
}

.section-title-center::after {
    margin-left: auto;
    margin-right: auto;
}

.section-title:first-child {
    margin-top: 0;
}
.list {
	line-height: 1.8;
	font-size:1rem;
	color: #404040;
	text-align: left;
	list-style-image:url("../images/bullet1.png");
	text-indent: 0px;
	font-style: normal;
	padding: 5px;
	margin-left:1em;
	letter-spacing: 1px;
	}
.numberedlist {
	line-height: 1.8;
	font-size:1rem;
	color: #404040;
	text-align: left;
	text-indent: 0px;
	font-style: normal;
	padding: 5px;
	margin-left:1em;
	letter-spacing: 1px;
}

.numberedlist2 {
	line-height: 1.8;
	font-size:1rem;
	color: #404040;
	text-align: left;
	text-indent: 0px;
	font-style: normal;
	padding: 0px 3px;
	margin-left:3em;
	letter-spacing: 1px;
}

.bold {
	font-weight: 700;
}

/* buttons */

.btn {
    padding: .5em 1.75em;
    font-weight: 700;
    margin-top: .5em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.btn-primary {
    background: #005100;
    color: #fff;
    justify-self: start;
	opacity: 1;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #fff;
	color: #005100;
	opacity: .8;
}

.btn-read {
    background-color: rgba(0,0,0,.7);
    color: #fff;
    justify-self: start;
	opacity: .8;
	}

.btn-read:hover,
.btn-read:focus {
    background-color: rgba(0,0,0,.2);
	color: #00CC00;
	opacity: .8;
}

@media (max-width: 680px) and (min-width: 600px)  {
	.btn-read {
		font-size: .8em;
	}
}

.btn-form {
    justify-self: end;
}
.btn-form:hover,
.btn-form:focus {
    background-color: #00CC00;
	color: white;
}



/* ==================
    general layout
===================== */

.main-grid {
    display: grid;
    grid-template-columns: minmax(.2em, 1fr) minmax(0px, 500px) minmax(.2em, 1fr);
    grid-column-gap: 2em;
}

@media (min-width: 600px) {
    .main-grid {
        grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 320px)) minmax(0, 1fr);
		grid-column-gap: 1em;
    }
}

@media (min-width: 800px) {
    .main-grid {
        grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(150px, 320px)) minmax(1em, 1fr);
		grid-column-gap: 2em;
    }
}

/* navigation */

.header {
    background-color: #000;
}

.header-home {
    background: transparent;
    position: absolute;
    width: 100%;
}


.header-content {
    display: flex;
    grid-column: 2 / -2;
	padding-right:10px;
	}

.logo-link {
    padding-top: 1em;
}
.logo {
	padding-left:10px;
	padding-bottom:10px;
}

.fas fa-phone-square {
	color:white;
}
.nav {
    position: fixed;
	background:#000;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
    transform: translateX(0);
    transition: transform 250ms;
	}

.navigation-open {
    transform: translateX(-100%);
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 3rem;
    font-weight: 700;
}

.nav-link:hover,
.nav-link:focus {
    color: #00CC00;
}

.close-nav {
    border: 0;
    background: 0;
    color: #fff;
    font-weight: 700;
    font-size: 3rem;
    cursor: pointer;
    padding: .5em;
    position: absolute;
}

.open-nav {
    border: 0;
    background:0;
    color: #fff;
    cursor: pointer;
    padding: .5em;
    margin-left: auto;
    font-size: 1.5em;
}

.current {
    border-bottom: 4px solid #00CC00;
}

@media (min-width: 600px) {
    .open-nav,
    .close-nav {
        display: none;
    }
    
    .nav {
        position: initial;
    }
    
    .nav-list {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .nav-item {
        margin-left: 2em;
    }
    
    .nav-link {
        font-size: 1em;
    }
    
    .header-home .nav {
/*        background: transparent;*/
    }
}

.research {
	font-size: 1.125rem;
}
/*
.research2 {
	text-decoration: none;
	font-weight:550;
	color: #005100;
}
*/
.research2 a:link,
.research2 a:visited {
    color: #005100;
    font-size: 1rem;
    text-decoration: none;
	cursor: pointer;
	font-weight:550;
	}

.research2 a:hover,
.research2 a:focus {
	color: #00CC00;
	text-decoration: none;
	cursor: pointer;
	}
.research2 a:active {
    color: #005100;
    font-size: 1rem;
    text-decoration: none;
	cursor: pointer;
	}

.orphan {
	text-decoration: none;
	font-weight:550;
	color: #005100;
}
.orphan a:link,
.orphan a:visited {
    color: #005100;
    font-size: 1rem;
    text-decoration: none;
	cursor: pointer;
	}

.orphan a:hover,
.orphan a:focus {
	color: #00CC00;
	text-decoration: none;
	cursor: pointer;
	}
.orphan a:active {
    color: #005100;
    font-size: 1rem;
    text-decoration: none;
	cursor: pointer;
	}



/* footer */

footer {
    background-color: #005100;
    text-align: center;
	width: 100%;
}

.copyr    { grid-area: copyr }
.rights     { grid-area: rights }
.phone    { grid-area: phone }
.email     { grid-area: email }

.footer-main {
	display:grid;
	grid-template-columns: 1fr, auto, 1fr;
  	grid-template-areas: 
    ". copyr ."
	". rights ."
	". phone ."
	". email .";
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.footer-text {
    padding: 1.5px 5px;
	background-color: #005100;
	color: white;
	opacity: .9;
	text-transform: uppercase;
	text-align: center;
}

.footer-text a:link,
.footer-text a:active {
    color: #fff;
    font-size: 1rem;
    margin: 0 .5em;
	text-decoration: none;
	cursor: pointer;
}
.footer-text a:hover,
.footer-text a:focus {
	color:#00CC00;
}

@media (min-width: 600px) {
	.footer-main {
	display:grid;
	grid-template-columns: 1fr, auto, auto 1fr;
  	grid-template-areas: 
    ". copyr rights ."
	". phone email .";
	padding-bottom: 1.5px;
	margin-bottom: 0px;
}
}

@media (min-width: 900px) {
	.footer-main {
	display:grid;
	grid-template-columns: 1fr, auto, auto, auto, auto, 1fr;
  	grid-template-areas: 
    ". copyr rights phone email .";
	padding-bottom: 1.5px;
	margin-bottom: 0px;
	max-width: 1200px;
}
}

/* ==================
    main pages
===================== */
.text-explain     { grid-area: text-explain }
.sidebar     { grid-area: sidebar }

.curonz {
	display:grid;
	grid-template-columns: 1fr, auto, 1fr;
  	grid-template-areas: 
    ". text-explain ."
	"sidebar sidebar sidebar";	

}
.advisors {
	background-color: #F2F2F2;
	padding: .2em 1em;
	border-bottom: #00CC00 4px solid;
	margin-bottom: 1em;
}

.title-pages-curonz {
	text-align: center;
	text-transform:uppercase;
	font-size: 1.8rem;
}
.subtitle-pages-curonz {
		text-align: center;
	}
.subtitle-pages-diseases {
	text-align: left;
	text-transform:uppercase;
	color:#005100;
	border-top: #00CC00 2px solid;	
}

.subtitle-pages-diseases2 {
	text-align: left;
	text-transform:uppercase;
	color:#005100;
	}
.sidebar {
	display: flex;
	flex-direction: column;
	min-width: 150px;
	text-align: center;
	padding-left: 0em;
	}

.secondary-links {
	background-color:#D1FFD1;
	font-family: 'Jura', sans-serif;
	text-transform: uppercase;
	font-size:1.25rem;
	font-weight: 600;
	line-height: 2.5;
	margin:.2em 0em .2em 0;
	padding: .5em 1em .5em 1em;
	text-decoration: none;
	border-bottom: #00CC00 solid 2px;
	color:#404040;
	width: 100%;
}
.secondary-links:first-child {
	margin: 1em 1em .2em 0;

}

.sidebar a:link,
.sidebar a:active {
    color: #404040;
}
.sidebar a:hover,
.sidebar a:focus {
	background-color: lightgrey;
}

@media (min-width: 600px) {
	.curonz {
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 320px)) minmax(1em, 1fr);
  	grid-template-areas: 
    "sidebar text-explain text-explain ."; 
		}
		.secondary-links {
		text-align: left;
		font-size:1rem;
		letter-spacing: 0px;
		text-transform: capitalize;
		padding-left: 3px;
			}
	.sidebar {
		width: 90%;
		padding-left: 1em;
			}
	.title-pages-curonz,
	.subtitle-pages-diseases, 
	.subtitle-pages-curonz {
		text-align: left;
	}
	.title-pages-curonz {
		font-size: 2rem;
	}
}

@media (min-width: 800px) {
	.curonz {
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 320px)) minmax(1em, 1fr);
  	grid-template-areas: 
    "sidebar text-explain text-explain ."; 
		}
	.secondary-links {
		text-align: left;
		font-size:1.25rem;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding: .5em 1em .5em 1em;
			}
	.sidebar {
		width: 90%;
		padding-left: 1em;
			}
	.title-pages-curonz,
	.subtitle-pages-diseases, 
	.subtitle-pages-curonz {
		text-align: left;
	}
}

.discovery {
	width:0 auto 0;
	
}
/* ==================
    hero area
===================== */

.hero {
    background-image: url(../images/home-image-child.jpg);
    background-size: cover;
	background-color: lightgray;
	background-blend-mode: multiply; 
	background-position: bottom left;
    padding: 1.5em 0 1.5em;
    color: #404040;
/*	box-shadow: inset 0px -106px 99px 0px rgba(240, 214, 234, 0.28);*/
}

.hero > * {
    grid-column: 2 / -2;
}

@media (min-width: 400px) {
    .hero > * {
        margin-right: 20%;
    }
}


@media (min-width: 600px) {
    
    .hero {
    background-image: url(../images/home-image-child-ipad.jpg);
    background-size: cover;
	background-color: lightgray;
	background-blend-mode: multiply; 
	background-position: bottom left;
	padding: 2em 0em 1.5em 0em;
/*	box-shadow: inset 0px -106px 99px 0px rgba(240, 214, 234, 0.28);*/
	   }
    .hero > * {
    grid-column: 2 / span 2;
    }
}

@media (min-width: 800px) {
    
    .hero {
    background-image: url(../images/home-image-child.jpg);
    background-size: cover;
	background-color: lightgray;
	background-blend-mode: multiply; 
	background-position: bottom left;
	padding: 1.5em 1em 1.5em 0;
		   }
    
    .hero > * {
        grid-column: 2 / span 2;
    }
}

.helper100 {
	width: 100%;
	height:90px;
}
/*

@media (min-width: 600px) {
	.helper100 {
		width: 100%;
		height:90px;
	}
}
*/
/* ==================
    info section
===================== */

.info {
    padding: 2em 0;
    text-align: center;
}

.col {
    grid-column: 2 / -2;
	padding: 2em .5em;
	background-color: #D9FFD9;
	border-bottom: 10px white solid;
	}
.col:last-child {
	padding-bottom: 1em;
}

@media (min-width: 600px) {
    .col {
        grid-column: span 1;
		padding: 1em .3em;
    }
    
    .col:first-child {
        grid-column: 2 / span 1;
    }
}
@media (min-width: 800px) {
    .col {
        grid-column: span 1;
		padding: 2em 1em;
    }
    
    .col:first-child {
        grid-column: 2 / span 1;
    }
}

/* ==================
    template page
===================== */

.main-template {
    padding: 4em 0;
}

.main-template > * {
    grid-column: 2 / -2;
}
.image-top {
	width: 100%;
	min-height: 100px;
	object-fit: cover; 
	}
.top-image {
	background-color: #005100;
	width: 100%;
	min-height: 100px;
}
.main-image {
    margin-bottom: 1.5em;
    box-shadow: 5px 5px 0px black, 10px 10px 0 #FFE600;
}

@media (min-width: 600px) {
    .main-image,
    .secondary-text {
        grid-column: 2;
    }
    
    .main-text {
        grid-column: 3 / span 2;
        grid-row: span 2;
    }
    
    .secondary-text {
        order: 2;
    }
    
}


/* ==================
    form
===================== */

.contact-form {
    display: grid;
}
.contact-img {
	justify-content: center;
}
label {
    font-weight: 700;
}

input,
textarea {
    margin-bottom: .75em;
    padding: .4em;
    font-family: inherit;
}

textarea {
    resize: none;
    height: 100px;
}


@media (min-width: 600px) {
    .contact-form {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: dense;
        grid-column-gap: 1em;
    }
    
    .name-label,
    .name-input {
        grid-column: 1;
    }
    
    .company-label,
    .company-input {
        grid-column: 2;
    }
	.email-label,
    .email-input {
        grid-column: 1;
    }
    
    .phone-label,
    .phone-input {
        grid-column: 2;
    }
    
    .message-label,
    .message-textarea {
        grid-column: span 2;
    }
    
    .btn-form {
        grid-column: 2;
    }
    
}