@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400);

/*********************
 ******   FONT   *****
 *********************/

@font-face {
    font-family: 'robosapien';
    src: url('../fonts/robosapien.eot');
    src: url('../fonts/robosapien.woff2') format('woff2'),
         url('../fonts/robosapien.woff') format('woff'),
         url('../fonts/robosapien.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robosapienital';
    src: url('../fonts/robosapienital.eot');
    src: url('../fonts/robosapienital.woff2') format('woff2'),
         url('../fonts/robosapienital.woff') format('woff'),
         url('../fonts/robosapienital.otf') format('opentype');
    font-weight: normal;
    /*font-style: italic;*/
    font-style: normal;
}

@font-face {
    font-family: 'robosapiengrad';
    src: url('../fonts/robosapiengrad.eot');
    src: url('../fonts/robosapiengrad.woff2') format('woff2'),
         url('../fonts/robosapiengrad.woff') format('woff'),
         url('../fonts/robosapiengrad.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robosapiengradital';
    src: url('../fonts/robosapiengradital.eot');
    src: url('../fonts/robosapiengradital.woff2') format('woff2'),
         url('../fonts/robosapiengradital.woff') format('woff'),
         url('../fonts/robosapiengradital.otf') format('opentype');
    font-weight: normal;
    /*font-style: italic;*/
    font-style: normal;
}


/**********************
 *****   CUSTOM   *****
 **********************/

:root {
    --c1: indigo;     /* Purple */
    --c2: goldenrod;  /* Gold */
    --c3: #C72C48;    /* Red */
    --c4: #FFE58C;    /* light gold */
}

.pad-down{padding:0 0 2vh;}
.ML{font-family:robosapien;}
.pronto{font-family:robosapiengradital, robosapien;}
.logo{font-size:max(7vw,7vh); color:var(--c1);}
.bird{width:max(25vw,25vh);}
.c2{color:var(--c2);}
.description{color:var(--c1); font-size:max(2vw,2vh); text-align:center;}
.emph{color:var(--c2); font-style:italic; font-weight:bold;}
.emph2{color:var(--c2); font-size:max(2vw,2vh); font-weight:bold; text-align:center;}
.ital{font-style:italic;}
.b{font-weight:bold;}
.h1-ml{text-align:center; color:var(--c1); font-size: 5vh;}
.code{font-family:courier; color:var(--c2);}
.error_image{width:max(10vh,10vh);}
.size20{width:max(20vw, 30vh);}
.warning{color:var(--c3);}
.figure1{width:max(25vw,35vh);}
.figure2{width:max(30vw,40vh);}

.formInputs{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; border-radius: 10px; padding: 0%;
    /*font-size: 1.5em; border: 3px solid #436EEE;*/
    font-size: 1.5em; border: 3px solid var(--c1);
    box-shadow: 0 0 0 1px rgba(255,255,255,.25);
    display: inline; color: #A0A0A0;
    outline: none;
}
.parameters{
    display: flex;
    justify-content: center;
}
.region{
    border: double var(--c1);
    border-width: 5px;
    border-radius: 20px;
    padding: 2vw;
    margin: 1vw;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.select-file a{color:var(--c2);}
.select-file a:visited{color:var(--c2);}
.select-file a:hover{color:var(--c3);}
input.boxsize{
    width: 4vw;
    height: 4vh;
}
input.textsize{
    font-size: 3vh;
    color: var(--c2);
    text-align: center;
}

/* Input file types */
.input-file-types table {
    margin-left: auto;
    margin-right: auto;
    width: 35vw;
    font-size: max(1.1vw,1.2vh);
}
.input-file-types table tr td:first-child {color:var(--c2); font-family:courier; padding-left:5vw; text-align:center;}
.input-file-types table tr td:last-child {padding-left:5vw; text-align:left;}

/* Columns in input file */
.columns {
    display: flex;
    justify-content: space-between;
}
.columns table {
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
    font-size: max(1.1vw,1.2vh);
}
.green {color:green;}
.red {color:red;}

/* Example input files */
.input-files table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vh;
    width: 55vw;
    font-size: max(1.0vw,1.0vh);
}
.input-files td {text-align:center; padding: 2vh 0;}
.table-header {font-weight:bold; border-bottom: 1px solid var(--c1);}
.example {font-family:courier;}
.example a{color:var(--c3);}
.example a:visited{color:var(--c3);}
.example a:hover{color:var(--c2);}

/* Parameter options */
.parameter-options table {
    margin-left: auto;
    margin-right: auto;
    width: 45vw;
    font-size: max(1.1vw,1.2vh);
}
.parameter-options tr:first-child {font-weight:bold;}
.parameter-options tr:not(:first-child) {border: 1px solid var(--c1);}
.parameter-options table tr td:first-child {padding-left:2vw; text-align:center;}
.parameter-options table tr:not(:first-child) td:first-child {color:var(--c2);}
.parameter-options table tr td:last-child {padding-left:2vw; text-align:center;}

/* Libraries */
.libraries table {
    margin-left: auto;
    margin-right: auto;
    width: 20vw;
    font-size: max(1.3vw,1.3vh);
}

.lnk:hover{color:var(--c3);}  /* Chevron down arrow link */

.results {padding: 2vh 0 5vh;}

.results table {
    margin-left: auto;
    margin-right: auto;
    width: 40vw;
    font-size: max(1.5vw,1.5vh);
}

/*.results tr:nth-child(odd) {background-color: #navy;}*/
.results tr:nth-child(even) {background-color: #DCDCDC;}

.results td:nth-child(odd) {color: var(--c1);}
.results td:nth-child(even) {color: var(--c2);}

.results td {
    border: 1px solid var(--c2);
    border-collapse: collapse;
}

.relationship-files table {
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
    font-size: max(2vw,2vh);
}
.relationship-files a{color:var(--c1); text-decoration: underline;}
.relationship-files a:visited{color:var(--c1); text-decoration: underline;}
.relationship-files a:hover{color:var(--c3); text-decoration: underline;}

.codefiles table {
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
    font-size: max(2vw,2vh);
}
.codefiles a{color:var(--c3);}
.codefiles a:visited{color:var(--c3);}
.codefiles a:hover{color:var(--c2);}

/* Browse button */
.browse{
    background-color: #f4f0ec;
    padding 0.5em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #222222;
    /*font-family: 'Oswald';*/
    font-family: 'Roboto', sans-serif;
    font-size: min(2.5vw,2.5vh);
    /*font-size: 2.5vh;*/
    text-decoration: none;
    border: none;
}
.browse:hover{
    border: none;
    background: var(--c4);
    box-shadow: 0px 0px 1px #777;
}
.browse:active{
    background: var(--c2);
}

/* Classification or Regression radio buttons */
.radio-buttons{
    white-space: nowrap;
}

/* Algorithm drop down menu */
.alg-dropdown{
    display: flex;
    justify-content: center;
}

/* Algorithm radio button */
.alg-radio{
    padding 0.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 6px;
    color: var(--c2);
    /*font-family: 'Oswald';*/
    font-family: 'Roboto', sans-serif;
    font-size: min(2.5vw,2.5vh);
    /*font-size: 2.5vh;*/
    text-decoration: none;
    border: none;
}

.alg-radio:hover{
    color: var(--c3);
}
.alg-radio:active{
    color: var(--c1);
}

.select{height:4vh;}

/* Click here to let the learning begin! */
.submit-button{
    display: flex;
    justify-content: center;
    padding: 5vh 0vh 5vh;
}
.btn{
    padding: 0.5pm;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 6px;
    /*font-family: 'Oswald';*/
    font-family: 'Roboto', sans-serif;
    font-size: max(1.7vw,1.7vh);
    background: radial-gradient(var(--c2) 40%, skyblue);
    color: #fff;
    border-radius: 50px;
    border: double;
    border-color: white;
}
.btn:hover{
    color: #fff;
    background: var(--c2);
}
.btn:active{
    background: var(--c1);
}

.random_region{
    padding-top: max(0.7vw,0.7vh);
    display: flex;
    justify-content: flex-end;
}

.random_btn{
    width: max(20vw,18vh);
    /*padding: 0.5pm;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 6px;*/
    /*font-family: 'Oswald';*/
    font-family: 'Roboto', sans-serif;
    font-size: max(0.9vw,1.1vh);
    background-color: transparent;
    /*border-radius: 50px;*/
    border: none;
    outline: none;
    color: var(--c1);
    /*background: #fff;*/
    text-decoration: underline;
}
.random_btn:hover{
    color: var(--c3);
    background: transparent;
}
.random_btn:active{
    color: var(--c2);
    background: transparent;
}

.github{
    text-align:center;
    color:var(--c1);
}
.github a{color:var(--c3);}
.github a:visited{color:var(--c3);}
.github a:hover{color:var(--c2);}



/************************
 *****   ORIGINAL   *****
 ************************/

body, html{
	font-family: 'Lato', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	color: #5a5a5a;
	scroll-behavior: smooth;
}

h1{
    /*text-transform: uppercase;*/
}
h1 strong{
	/*font-weight: 900;*/
}
h2{
	text-transform: uppercase;
	line-height: 20px;
	margin:  0;
}
/*
h3{
font-size: 18px;
font-weight: 900;
}
*/
h4{
	text-transform: uppercase;
}
h5{
	text-transform: uppercase;
	font-weight: 700;
	line-height: 20px;
}
p{
	font-family: 'Open Sans', sans-serif;
}
p.intro{
	font-size: 16px;
	margin: 12px 0 0;
	line-height: 24px;
	font-family: 'Open Sans', sans-serif;
}
a{ color: #3399FF;}
a:hover,
a:focus{
	text-decoration: none;
	color: #3399FF;
}

.section-title hr{
	border-color: #3399FF;
	border-width: 4px;
	width: 60px;
	float: left;
	clear: both;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*ul, ol{
	padding: 0;
	webkit-padding: 0;
	moz-padding: 0;
}*/


/* Navigation */
#tf-menu {
	padding: 1vh;
	transition: all 0.8s;
}
#tf-menu.navbar {
    background-color: #ffffff;
}
#tf-menu.navbar-default {
    background-color: rgba(248, 248, 248, 0);
    border-color: rgba(231, 231, 231, 0);
}
/*
#tf-menu a.navbar-brand {
    font-size: 22px;
    color: var(--c1);
    font-weight: 900;
}
*/
#tf-menu.navbar-default .navbar-nav > li > a {
	color: var(--c1);
	font-size: 14px;
	letter-spacing: 1px;
}
.on {
	background-color: #ffffff !important;
	padding: 0 !important;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
	color: var(--c2) !important;  /* blue */
	background-color: transparent;
	font-weight: 700;
}

.navbar-toggle {
	border-radius: 0;
}
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus {
        background-color: var(--c2);
	border-color: var(--c2);
	}
.navbar-default .navbar-toggle:hover>.icon-bar {
	background-color: var(--c1);
	}
/* Home Style */
#tf-home{
	padding: 10vh 0 10vh;
        background: linear-gradient(skyblue, white);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
a.fa.fa-angle-down {
	padding: 10px 15px;
	color: var(--c1);
	border: 2px solid var(--c1);
	border-radius: 50%;
	font-size: 24px;
	transform: translate(0, 15vh);
	transition: all 0.5s;
}
a.fa.fa-angle-down:hover{
	background-color: var(--c2);
	color: var(--c1);
	border: 2px solid var(--c2);
}
*/

/* Learn! Section */
#tf-learn{
	padding: 10vh 0;
        background: linear-gradient(skyblue, white);
}

/* Advanced Section */
#tf-advanced{
        background: linear-gradient(skyblue, white);
	padding: 10vh 0;
}

/* About Section */
#tf-about{
	padding: 10vh 0;
        background: linear-gradient(skyblue, white);
}

/* Contact Section */
#tf-contact{
	padding: 10vh 0;
        background: linear-gradient(skyblue, white);
}

/* Metrics Section */
#tf-results{
	padding: 10vh 0;
        background: linear-gradient(skyblue, white);
}

/* Code Section */
#tf-code{
	padding: 10vh 0;
        background: linear-gradient(skyblue, white);
}