/*TODO Fix IE flex container CSS*/

/*Variables*/
:root {
    --margin_paragraph: 1em;
    --margin_heading: 1.5em;
    --margin_main: 20%;
    --text_main: 1.5em;
    --text_h1: 2.3em;
    --text_h2: 2.1em;
    --text_h3: 1.8em;
    --text_h4: 1.5em;
    --text_references: 1.2em;
    --color_dark-blue: #3D5A80;
}

@media screen and (max-width: 641px) {
    :root {
        --margin_main_text: 1em;
        --margin_heading: 1.5em;
        --margin_main: 7%;
        --text_main: 1.25em;
        --text_h1: 2em;
        --text_h2: 1.75em;
        --text_h3: 1.5em;
        --text_h4: 1.25em;
        --text_references: 1em;
    }
    
}

/*main layout class */

* {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    /*TODO add font styles and search for "font" to delete any separate styling*/
}

b {
    font-weight: 700;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /*background-color: #e1e9eb;*/
}

/*Column content layout class*/
.column {
    float:left;
    margin: 1% 2%;
    padding: 0px;
    flex-direction: column;
    /*-webkit-box-orient: vertical;
    -webkit-box-direction: normal;*/
}

/* 100% */
.column.full_size {
    width:96%;
}

/* 66% */
.column.two_thirds_size {
    width: 62.6%;
}

/* 33% */
.column.third_size {
    width: 29.3%;
}

/* 50% */
.column.half_size {
    width: 48%;
}

/*Minimum width, as oppoed to set width*/
/* 100% */
.column.full_size_min {
    min-width:96%;
}

/* 66% */
.column.two_thirds_size_min {
    min-width: 62.6%;
}

/* 33% */
.column.third_size_min {
    min-width: 29.3%;
}

/* 50% */
.column.half_size_min {
    min-width: 48%;
}

/*Each new item in this container ends up below the last one*/
.flex_column {
    display: flex;
    flex-flow: column;
}

/*Each new items in this container ends up to the right of the last one*/
.flex_row {
    display: flex;
    flex-flow: row;
}

/*Centers all content*/
.center {
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.flex_column.wrap, .flex_row.wrap {
    flex-wrap: wrap;
}

/*Makes this item round*/
.round {
    border-radius: 50%;
}

.main_text {
    font-size: 1.5em;
    font-size: var(--text_main);
    margin: 1em;
    text-align: justify;
}

img.main_text {
    margin-right: 0;
    margin-left: 0;
    padding-right: var(--margin_main_text);
    padding-left:  var(--margin_main_text);
}

/*Margin for item on top of the page. Include this class if the item does not have a margin (not needed for headings and paragraphs)*/
.first_item {
    margin-top: 1.5em;
    margin-top: var(--margin_heading);
}

/*Margin for item on bottom of the page. Include this class if the item does not have a margin (not needed for headings and paragraphs)*/
.last_item {
    margin-bottom: 1.5em;
    margin-bottom: var(--margin_heading);
}

/*Row content layout class*/
.row {
    float:left;
    margin: 1% 2%;
    padding: 0px;
    flex-direction: row;
}

/*Styling for the div where all headings, text paragraphs and pictures are contained*/
.main_content{
    margin-left: 20%;
    margin-right: 20%;
    z-index: 8000;
    margin-left: var(--margin_main);
    margin-right: var(--margin_main);
    margin-bottom: var(--margin_heading);
}

/*Remove page title and iGEM logo from top of page*/
#top_title {
    display:none;
}

#content {
    width:100%;
    margin: 0;
    padding: 0;
    background-color: #e1e9eb;
}

/* Paragraphs (for body text ) */
p {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    /*TODO add font styles and search for "font" to delete any separate styling*/
    margin: 0;
    padding: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.5em;

    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #e27d60;
    padding-left: 1em;
    padding-right: 1em;
    padding-left: var(--margin_main_text);
    padding-right: var(--margin_main_text);
}

h1.no_border, h2.no_border, h3.no_border, h4.no_border, h5.no_border, h6.no_border {
    border-width: 0 0 0 0;
}

h1 {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

    margin-block-start: var(--margin_main_text);
    margin-block-end: var(--margin_main_text);

    font-size: 2.5em;
    font-size: var(--text_h1);
    margin: 2.5vh 0 2.5vh 0;
    /*padding = 0.5vh 0 2.5vh 0;*/
}

h2 {
    font-size: 2.1em;
    font-size: var(--text_h2);
    margin: 2vh 0 2vh 0;
}

h3 {
    font-size: 3vh;
    font-size: var(--text_h3);
    margin:  2vh 0 2vh 0;
}

/*Styling to make make links to this heading not take the user below the heading, but instead also include the heading*/
.anchor {
    scroll-margin-top: 12vh;
}

.references_container {
    font-size: 1.5vh;
    font-size: var(--text_references);
}

.references_container a {
    color: #3D5A80;
}

.image_container_c {
    display: flex;
    justify-content: center;
}

.image_container_c img {
    margin: 2vh;
}

.img_border {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25);
}

/* Adds a dark shadow around image, making it "hover" above the background */
.img_border_dark {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
}

div.img_flowingText {
    overflow: auto;
}

div.img_flowingText figure {
    margin-top: 2vh;
    margin-bottom: 0;
}

div.img_flowingText figcaption{
}

div.img_flowingText img {
    width:100%;
}

div.img_flowingText_half-size figure {
    max-width: 40%;
    max-height: 100%;
}

div.img_flowingText2_home figure {
    width: 40%;
    max-height: 100%;
}

figure.img_flowingText_left {
    float:left;
    margin-left: 2vh;
}

figure.img_flowingText_right {
    float:right;
    margin-right: 2vh;
}

.main_content a {
    color: #3D5A80;
    color: var(--color_dark-blue);
}

#banner_license {
    position: absolute;
    right: 2vw;
    bottom: 2vw;
    font-size: 2vh;
}

#banner_license a {
    color: #ffffff;
}

#sponsor1 {
    margin-bottom: 2vh;
}

img.float_left {
    float: left;

}

/*TODO Add class that puts in/line pictures as full screen pictures when using mobile*/
@media screen and (max-width: 641px) {
    .mobile_full_size {
        max-width: 100%;
        width: 100% !important;
        justify-content: center;
        justify-items: center;
        align-items: center;
        align-content: center;
    }

    div.img_flowingText_half-size.mobile_full_size figure {
        max-width: 100%;
        width: 100% !important;
        justify-content: center;
        justify-items: center;
        align-items: center;
        align-content: center;
    }

    .img_flowingText.mobile_full_size p {
        text-align: left;
    }

    .mobile_column {
        flex-direction: column;
    }

    /*.main_content {
        margin-left: 7%;
        margin-right: 7%;
    }*/
}