/*
Theme Name: ACTN Theme
Description: Custom designed theme specially for Atlantic Clinical Trials Network
Version: 0.9
Author: Rob Williams, Results Marketing & Advertising <web@resultsinc.ca>
Tags: custom template
*/

/* Default Styles */

html, body {
    width:                  100%;
    height:                 100%;
    font-family:            'Roboto', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             white;
}

p { padding: 0 0 1em 0; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }

img.centered {
	display: block;
	margin: 0 auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 1em 1em;
	display: inline;
}

img.alignleft {
	display: inline;
}

img.aligncenter {
    display: block;
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { margin: 0 auto; }


/* Basic styles */

a { text-decoration: none; color: white; transition: 0.5s all; font-weight: 800; }
a:hover { color: yellow; }

header a { color: #00a69e; }
header a:hover { color: #0e5d7c; }

h1 { font-family: 'Roboto', 'Arial', sans-serif; font-size: 4em; font-weight: 600; line-height: 1.5em; letter-spacing: 0.05em; text-align: center; }
h2 { font-family: 'Roboto', 'Arial', sans-serif; font-size: 2.5rem; line-height: 1.5em; }
h3 { font-family: 'Roboto', 'Arial', sans-serif; font-size: 4em; font-weight: 300; line-height: 1.5em; letter-spacing: 0.05em; }
h4 {}

.header_green { color: #00a69e; }
.header_blue { color: #4773bd; }

main > *:not(.fullwidth) { width: 95%; max-width: 1600px; margin: 0 auto; }
.fullwidth { margin-bottom: 3rem; }

header { width: 95%; max-width: 1600px; margin: 0 auto; position: relative; z-index: 2; padding: 2rem 0; }
header:after { position: absolute; left: 0; top: 53%; height: 15%; width: 100%; content: ''; background: #00a69e; z-index: 1; }
header .logo_container { background: white; display: inline-block; position: relative; z-index: 3; }
header img { height: 200px; padding-right: 3rem; }
header .language_selector { list-style: none outside; position: absolute; bottom: 60%; right: 15rem; }
header .language_selector li { display: inline-block; padding: 0 1rem; }
header .language_selector li:first-child { border-right: 1px #ccc solid !important; }
header .join { position: absolute; bottom: 60%; right: 2rem; text-align: center; }
header .join p { padding: 0; margin: 0; }

footer { background: #4773ba; color: white; margin-top: 3rem; }
.footer_bar { list-style: none outside; width: 95%; margin: 0 auto; }
footer img { height: 240px !important; }
footer p { text-align: center; }

.no_gap { gap: 0; }
.blue_fade { background: linear-gradient(90deg, rgba(180,195,228,1) 20%, rgba(255,255,255,1) 98%); margin: 2rem 0; }
.blue_fade > div:last-child { padding: 2rem; columns: 2; column-gap: 2rem; }
.blue_fade p { font-size: 1.2em; width: 80%; }
.blue_fade p:last-child { padding: 0 0 1em; margin: 0; }

.hex_image_container {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    width: 200px;
    height: 300px;
    margin: -40px 0 0 20px;
    position: relative;
    z-index: 5;
}
.hexagon-in-1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    position: relative;
}
.hexagon-in-2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    background-size: cover;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    position: relative;
}

.wp-block-cover { height: 100%; }

.team { list-style: none outside; align-items: center; }
.team .wp-block-column { position: relative; }
.divider_green li { padding: 2rem 0 1rem; border-bottom: 15px #bfe9e7 solid; }
.divider_blue li { padding: 2rem 0 1rem; border-bottom: 15px #d1e2f1 solid; }
.team li:last-child { border-bottom: none; margin-bottom: 2rem; }
.two-column-text { columns: 2; column-gap: 3rem; }

.contact_name_title { position: absolute; top: 8em; left: 50%; transform: translate(0,-50%); font-size: 0.9em; }
.contact_name_title strong { font-size: 1.2em; }

.button_link { margin-top: 3rem; }
.button_link a { padding: 1rem 2rem; border: 1px white solid; background: rgba(255,255,255,0.3); color: white; transition: 0.5s all; }
.button_link a:hover { background: rgba(255,255,255,1); color: black; }
.button_link a + a { margin-left: 2rem; }

@media screen and ( max-width: 1280px ) {
    .blue_fade > div:last-child { columns: 1; }
    .two-column-text { columns: 1; }
}

@media screen and ( max-width: 1024px ) {
    header .language_selector { bottom: auto; top: 1rem; right: -1rem; z-index: 100; }
    header .join { z-index: 100; right: 0; font-size: 0.8em; line-height: 1em; }
}

@media screen and ( max-width: 781px ) {
    .blue_fade p { width: 100%; }
    header img { height: 150px; }
    .blue_fade { background: linear-gradient(180deg, rgba(180,195,228,1) 20%, rgba(255,255,255,1) 98%); }
    .centre_on_mobile { text-align: center; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 2rem; }
}

@media screen and ( max-width: 500px ) {
    .hex_image_container { width: 125px; height: 180px; }
    .contact_name_title { top: 5em; }
}