/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* CUSTOM CSS */

html {
    font-family: 'Catamaran', Helvetica, Arial, sans-serif;
    background: #fafafa;
    font-weight: 400;
    color: #504d4d;
    letter-spacing: 0.07em;
}

.debug * {
    background: rgba(255,0,0,0.2);
    }

/**************************header*************************************/

#laptop ul li ul {
    display: none;
    position: absolute;
    background: #fafafa;
    margin: 0 10px;
    padding: 1em 2.5em;
    
   

/*    text-align: center;*/
}

#laptop ul li:hover ul {
    display: block;
    

}

#laptop ul li ul li {
/*    background: yellow;*/
    display: block;
    line-height: 1.2em;
    margin: 0;
    letter-spacing: .03em;
    line-height: 2em;

}


header {
    display: flex;
}

div#toplogo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5em;
/*    height: 70px;*/
}

div#toplogo img {
    width: 20vw;
    margin-left: 15px;
}

nav#laptop {
    display: flex;
}

header ul li {
    align-self: center;
}

header img#normal, header img#smallscreen {
    width: 60px;
    height: auto;
    transition: all .4s ease-out;
}

img#normal:hover,
header img#smallscreen:hover {
    transform: scale(1.1);
/*    transition: all .4s ease-out;*/
}

header ul {
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
/*    background: #fcf;*/
}

header a:last-child {
    padding: 0;
}

#phone,
#hamburger {
    display: none;
}

header div:first-child {
    margin-right: auto;
}

li {
    margin: 15px;
/*    background: yellow;*/
}


header a {
    text-decoration: none;
    display: block;
/*    background-color: #ef9840;*/
    padding: 1em 0;
    color: #504d4d;
    transition: all .2s ease-out;
/*    transition: .1s linear color;*/
}

header a:hover {
    color: #ef9840;
/*    transition: .1s linear color;*/
}

header li.active a {
    color: #ef9840;
}

div.floating img#wordmark {
    width: 60vw;
    height: auto;
}

div.floating {
    flex-direction: column;
    height:auto;
    width: auto;
    align-self: center;
    background-color: none;
}

div.floating h1 {
    font-size: 1.5rem;
/*    background:  rgba(250,250,250, 0.5);*/
    margin: 15px;
    padding: .2em;
}

/********************************top logo*********************************/

/*main*/

.head {
    display: flex;
    height: 400px;
    width: 100%;
    justify-content: center;
    position: relative;
}


main div.head img#navcoglogo {
    width: 200px;
    height: auto;
    background: rgba(250,250,250, 0.5);
    position: absolute;
    align-self: center;
    padding: .5em;
}


header img {
    width: 130px;
/*    height: 40px;*/
}


main div.head img#cabot {
    object-position: 0 40%;
}

main div.head img#cabotlogo {
    width: 190px;
    height: auto;
    background: rgba(250,250,250, 0.5);
    position: absolute;
    align-self: center;
    padding: .5em;
}

main div.head img#porlogo {
    width: 200px;
    height: auto;
    background: rgba(250,250,250, 0.9);
    position: absolute;
    align-self: center;
    padding: .5em;
}





/*img*/

section.two div.sub img {
    width: 56vw;
    height: 25vw;
    object-fit: cover;
    object-position: bottom;
    font-family: 'object-fit: cover; object-position: bottom';
}


section.three img {
    width: 30vw;
    height: 25vw;
    object-fit: cover;
    font-family: 'object-fit: cover';
}


main div.head img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover';
    
}

.each img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    font-family: 'object-fit: cover';    
}

.circle img {
    border-radius: 50%;
    border: 4px double #a2d5f2;
    width: 20vw;
    height: 20vw;
    object-fit: cover;
    object-position: top;
    font-family: 'object-fit: cover; object-position: top';
}

div.system img {
    width: 50vw;
    object-fit: contain;
}

/*
div.videowrap {
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
}

div.videowrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/


.videocontainer {
    width: 45%;
    height: auto;
/*    background: #fcf;*/
}

.videowrap{
/*    flex:1;*/
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.videowrap iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.find figure img,
.avoid figure img {
    width: 85%;
}




/* text */

p {
    line-height: 1.4em;
/*    margin: 10px;*/
}

li a, h5 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

h1 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
    line-height: 1.5em;
}

h3 {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

h3.white {
    color: #fafafa;
}

h1.white {
    color: #fafafa;
}

p.jump a {
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 0.4rem;
    color: #fafafa;
    line-height: 4em;
    font-weight: 600;
    transition: all .4s ease-out;
    
    
}

p.jump a:hover {
    color: #504d4d;
    transform: scale(1.3);    
}

.engage .jump a {
    color: #504d4d;
}

.semibold {
    font-weight: 600;
}

p a {
    color: #504d4d;
}



/* main */

main div.top {
    height: 70vh;
/*    margin: 0 15px;*/
/*    background: #ef9840;*/
}

main div.top img {
    height: 70vh;
    width: 100vw;
    object-fit: cover;
    object-position: 30%;
    font-family: 'object-fit: cover; object-position: 30%';
    
}



/* about */

section.two {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 15px;
    border-top: 4vh solid #a2d5f2;
}

#overview {
    height: auto;
    width: 30vw;
}

#pr {
    width: 50%;
}

.blue {
    background-color: #a2d5f2;
    width: 33vw;
    height: 25vw;
    text-align: center;
    display: flex;
    justify-content: center;
}

div.blue h1 {
    align-self: center;
    transition: all .4s ease-out;
    
}

div.blue h1:hover {
    z-index: 100;
    transform: scale(1.3);
}

.sub {
    width: 56vw;
    height: 25vw;
    background-color: #a2d5f2;
}

section.two .blue a {
    text-decoration: none;
    color: #504d4d;
}

section.two .blue a:hover {
    color: #fafafa;
}


/* projects */

.four {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-top: 50px;
    padding: 0 15px;
    border-top: 4vh solid #ef9840;
}

#project-wrap {
    display: flex;
    justify-content: space-around;
    width: 90%;
}

.four a {
    text-decoration: none;
    color: #fafafa;
}

.four a:hover {
    color: #504d4d;
}
section.four .orange h1 {
    transition: all .4s ease-out;
    
}

section.four .orange h1:hover {
    transform: scale(1.3);
}


section.four .orange {
    background-color: #ef9840;    
}

.orange,
.project {
    width: 20vw;
    height: 25vw;
    text-align: center;
}


.project {
/*    background-color: #ef9840;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project {
    transition: all .4s ease-in-out;
}

.project:hover {
        z-index: 100;
        transform: scale(1.2);
}


.project img {
    width: 20vw;
    height: 20vw;
    object-fit: contain;
    font-family: 'object-fit: contain';
    
}

section:nth-of-type(2) .orange {
    display: flex;
    justify-content: center;
}

section:nth-of-type(2) .orange h1 {
    align-self: center;
}


/* others */


.three {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 15px;
    border-top: 4vh solid #a2d5f2;
}

.link {
/*    background-color: #a2d5f2;*/
    width: 30vw;
    height: 25vw;
    position: relative;
    display: flex;
    justify-content: center;
}


.link img {
    opacity: 0.7;
}

.link h1 {
    align-self: center;
    position: absolute;
    text-align: center;
    transition: all .4s ease-out;
    
}

.link h1:hover {
    transform: scale(1.3);
}

.link h1 a {
    text-decoration: none;
    color: #fafafa;
}

.link h1 a:hover {
    color: #504d4d;
}


/* career */


#career {
    margin-top: 40px;
    padding: 0 15px;
    border-top: 4vh solid #ef9840;
}

.suborange {
    width: 56vw;
    height: 25vw;
    background-color: #ef9840;
}

.suborange img {
    width: 56vw;
    height: 25vw;
    object-fit: cover;
    font-family: 'object-fit: cover';
    
}

#career .orange {
    background-color: #ef9840;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30vw;
}

#career .orange h1,
#career .orange p {
    align-self: center;    
    width: 80vw;
}

p.jump a:hover {
    color: #504d4d;
}

p.jump {
    transition: all .4s ease-in-out;
}

p.jump:hover {
    transform: scale(1.3);
}


/* footer */

footer h5 {
    text-align: center;
    line-height: 1.4em;
}

footer.bluebox {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 5px;
    padding: 0 15px;
    border-top: 1vh solid #a2d5f2;
    align-items: center;
}

footer.orangebox {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 5px;
    padding: 0 15px;
    border-top: 1vh solid #ef9840;   
    align-items: center;
    
}


/*
footer {
    display: flex;
    justify-content: space-between;
    margin: 0 15px 5px 15px; 
}
*/

.icon {
/*    background-color: #a2d5f2;*/
    padding: .5em;
    margin: 0 15px;
/*    text-align: center;*/
}

footer div:nth-of-type(1) img {
    width: 70px;
}

footer div:nth-of-type(2) img {
    width: 150px;
}

footer div:nth-of-type(3) img {
    width: 60px;
}

footer div:nth-of-type(4) img {
    width: 90px;
}

footer div:nth-of-type(5) img {
    width: 60px;
}

h5 {
    align-self: center;
}

footer div:last-child {
    margin-left: auto;
}

footer div:nth-of-type(5) img:hover {
    transform: scale(1.2);
}

footer div:nth-of-type(5) img {
    transition: all .4s ease-in-out;
}

/**********************main felx**************************/


/*orange*/

section.first,
section.how,
section.system,
section.usecase,
section.year,
section.cmu,
section.almuni,
section.mainprojects,
section.videobl {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    text-align: center;
    padding: 0 15px;
    border-top: 4vh solid #a2d5f2;
}

section.video,
section.location, 
section.goal, 
section.engage,
section.conference,
section.by,
section.collabolator,
section.heads,
section.require {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    text-align: center;
    padding: 0 15px;
    border-top: 4vh solid #ef9840;    
}









/***********************NAVCOG******************************/


/*what'?*/

.what {
    width: 15vw;
    min-height: 25vh;
    background-color: #a2d5f2;
}

.first .text {
    width: 70vw;
    padding: 1em;
    align-self: center;
    text-align: left;
}

.first .text p {
    max-width: 55vw;
}

.text P:nth-of-type(2) {
    margin-top: 30px;
}

.what {
    display: flex;
    justify-content: center;
    text-align: center;
}

.what h1 {
    align-self: center;
}




/* VIDEO */

.title {
    background-color: #ef9840;
    width: 15vw;
}

/*
div.video {
    width: 640px;
    height: 360px;
    background-color: #ef9840;
}
*/

.video .text {
    width: 30vw;
    padding: 1em;
    align-self: center;
    text-align: left;
}

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

.title h1 {
    align-self: center;   
}


/* HOW */

.titlebl {
    background-color: #a2d5f2;
    width: 15vw;    
}

.container2 {
    display: flex;
    width: 80vw;
    justify-content: center;
}

.container {
    display: flex;
    width: 35vw;
    flex-direction: column;
    align-items: center;
}

.boxbl {
    width: 25vw;
    height: 5vh;
    background-color: #a2d5f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .2em;
}

.circle {
/*    background-color: #a2d5f2;*/
    border-radius: 50%;
    width: 20vw;
    height: 20vw;
    align-self: center;
    margin: 20px 0;
}

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

.titlebl h1 {
    align-self: center;
}

/*  location  */

.boxor {
    width:25vw;
    height: 5vh;
    background-color: #ef9840;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .2em;
}

.location ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

.location li {
    text-align: left;
    padding: 1em;
    line-height: 1.3em;
}

.location li a {
    text-transform: none;
    color: #504d4d;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.07em;
}

.location li a:hover {
    color: #ef9840;
    transition: all .2s ease-in-out;
}

/* system */

section.system .text {
    width: 25vw;
    text-align: left;
    padding: 1em;
    align-self: center;
}

section.system div.system {
    width: 50vw;
    display: flex;
/*    height: 40vh;*/
/*    background-color: #a2d5f2;*/
}

ol {
    list-style: decimal;
    padding: 0 1em;
    border-top: 2px solid #a2d5f2;
    border-bottom: 2px solid #a2d5f2;
}


/************************cabot*************************/

.goal .container,
.goal .container .boxor{
    width: 50vw;
    margin-bottom: 30px;
}

.find {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/*
.find figure,
.avoid figure {
    display: flex;
    justify-content: center;
}
*/

.find figure {
    width: 13vw;
    height: 13vw;
/*    background-color: #ef9840;*/
    align-self:center;
}


.avoid figure {
    width: 13vw;
    height: 13vw;
/*    background-color: #ef9840;*/
    align-self: center;
}

.goal .container:nth-of-type(3),
.goal .container:nth-of-type(3)  .boxor {
    width: 20vw;
}

.avoid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.wrapper {
    display: flex;
    flex-direction: column;
/*    justify-content: space-between;*/
}

.comic {
    display: flex;
/*    flex-direction: column;*/
    justify-content: space-around;
    
}

.usecase {
    text-align: left;
}

.usecase .text {
    width:70vw;
    margin: 1em;
    text-align: left;
    align-self: center;
}

.content {
    width: 65vw;
    height: auto;
    margin: 1em;
/*    background-color: #ef9840;*/
}

.comic h3 {
    width: 10vw;
}

.comic h3 {
    background-color: #a2d5f2;
    padding: 1em;
    align-self: center;
}

.engage .what {
    background-color: #ef9840;
}
    
.engage .text {
    text-align: left;
    flex-grow: 2;
    margin: 2em;
}

.engage .text p.jump a {
    font-size: 1rem;
    letter-spacing: 0.4rem;
    line-height: 2em;
    font-weight: 600;
}

.engage .text p.jump a:hover {
    color: #ef9840;
}

.engage .text p.jump:hover {
    transform: none;
}


/*********************POR*********************/

section.system div.text h3 {
    margin: 1em 0;
    line-height: 1.3em;
}



/**********************publications********************/

div.rectangle,
div.floating {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.rectangle {
    height:76px;
    width: 280px;
    align-self: center;
    background: rgba(250,250,250, 0.5);
}


section.conference .what {
    background-color: #ef9840;
}

section.year a,
.searchbox a {
    text-decoration: none;
    color: #504d4d;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.3em;
    font-size: 1.6rem;
    margin-left: 20px; 
    margin-right: 20px;
}

section.conference a {
    text-transform: capitalize; 
    text-decoration: none;
    color: #504d4d;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    line-height: 1.6em;
    font-size: 1.2rem;
/*    margin-left: 20px; */
}

section.year {
    align-items: center;
}

div.search {
    width: 70vw;
    text-align: left;
/*    flex-grow: 2;*/
}

.search ul {
    list-style: disc;
}

.search a:hover {
    color: #a2d5f2;
}

.search ul li a:hover {
    color: #ef9840;
}


/********************by year or conference*****************/

.searchbox a {
    font-size: 1.3rem;
}

div.searchbox {
    background-color: #a2d5f2;
    text-align: center;
/*    width: 100%;*/
    padding: 10px;
    margin-top: 15px;
}

section.paper {
    text-align: left;
    width: 80vw;
}

div.each {
    padding: 15px;
    margin: 15px;
}

section.paper div.each {
    margin-top: 15px;
}

p.name {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

p.name a:hover {
    text-decoration: none;
    color: #ef9840;
    transition: all .2s ease-in-out;
}

p.author {
    letter-spacing: 0.09em;
}

p.conference {
    font-family: 'Montserrat', 'Catamaran', sans-serif;
}

.searchbox a.active,
.searchbox a:hover {
    color: #fafafa;
}


/**********************members************************/

.collabolator h1 {
    transform: rotate(-90deg);
}

figure.indivi img {
    object-fit: cover;
    width: 200px;
    height: 200px;
    font-family: 'object-fit: cover';
    
}



figure.indivi figcaption {
    font-size: 1rem;
    letter-spacing: 0.1em;
    line-height: 2em;
    align-items: center;
/*    font-weight: 600;*/
}

figure.indivi {
/*    background-color: #ef9840;*/
    margin: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.member {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

figure.indivi a {
    text-decoration: none;
    color: #504d4d;
    transition: all .2s ease-out;
}

figure.indivi a:hover {
    color: #ef9840;
}


figcaption p {
    font-size: 1rem;
    line-height: 1em;
}


/**********************projects**************************/


div.logo {
/*    background-color: #ef9840;*/
    width: 20vw;
    height: 20vw;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all .4s ease-out;
    
}

div.logo:hover {
    transform: scale(1.3);
}

div.logo img {
    width: 15vw;
    height: 15vw;
/*
    object-fit: contain;
    font-family: 'object-fit: contain';
*/
    
    
}

div.eachpro {
    width: 30vw;
    display: flex;
    flex-direction: column;
/*    justify-content: center;*/
}

div.eachpro div.text {
    background-color: #ef9840;
    margin: 15px 0; 
    padding: 2em;
}

.eachpro p {
    line-height: 1.5em;
    color: #fafafa;
    
}


/***********************about***********************/

/*
div.head .located {
    
}
*/

div.wrap {
    display: flex;    
    flex-direction: column;
    align-items: center;
}

section.heads div.each {
    display: flex;
    width: 70vw;
}

section.heads div.each div.img {
    width: 200px;
    height: 200px;
    background-color: #ef9840;
    align-self: center;
}

h4 {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 2em;
}

section.heads div.text {
    width: 40vw;
    text-align: left;
    padding-left: 20px;
}

section.heads div.each div.img {
/*    align-self: center;*/
}


section.videobl .video {
    width: 45%;
    height: auto;
/*    background-color: #ef9840;*/
}

section.videobl .text {
    width: 30vw;
    padding: 1em;
    align-self: center;
    text-align: left;
}


section.videobl div.video .text a {
/*    text-decoration: none;*/
    color: #504d4d;
}


/********************************career************************************/


.bigwrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: 70vw;
}

.download p {
    font-weight: 600;
    font-size: 1.2rem;
    align-self: center;
}

.download p a,
.apply a {
    text-decoration: none;
    color: #504d4d;
    transition: all .2s ease-out;
}

.apply a {
    font-weight: 600;
    font-size: 1.2rem;
}

.apply {
    margin: 30px;
}

.download p a:hover,
.apply a:hover {
    color: #ef9840;
}

.download {
    display: box;
    max-width: 55vw;
    text-align: right;
    margin-left: 30px;
}

.download img {
    width: 65px;
}



h2.position {
    background-color: #a2d5f2;
    color: #504d4d;
}

h2 {
    background-color: #ef9840;
    color: #fafafa;
/*    width: fit-content;*/
    padding: .5em;
    font-weight: 600;
/*    margin-top: 30px;*/
}

.requirement {
    margin: 30px;
    max-width: 55vw;
}

.requirement .text {
    margin: 15px;
}

.requirement ol {
    list-style: disc;
    border: none;
}



@media screen and (max-width:1085px) {
    

/*main*/
    
    #menu li a.active {
        color: #504d4d;
    }
    
    #all.on,
    #toplogo.on {
        opacity: 0.5;
        transition: all .3s ease-in;
    }
    
    div#toplogo {
        display: inline-block;
        width: 30vw;
    }
    
    div#toplogo img {
        width: 30vw;
    }
    
    nav#laptop {
        display: none;
        
    }

    header {
        display: block;
    }
    
    header ul {
        display: block;
        width: 300px;
        position: relative;
        top: 100px;
    }
    
    header ul li {
/*        background-color: yellow;*/
        margin: 0;
    }
    
    #phone {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 50;
        height: 100%;
        background: #fafafa;
        transition: all 0.4s;
        transform: translate(300px);
    }
    
    #phone.on {
        transform: translate(0);
    }
    
    #hamburger {
        display: block;
        width: 1.4em;
        background: #fafafa;
        padding: .2em .4em;
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        margin:  2% 15px 15px 15px;
    }

    #hamburger div {
        width: 100%;
        height: 1px;
        background: #504d4d;
        margin: .4em 0;
        position: relative;
        transition: .1s ease-in-out all;
    }

    #hamburger.switch div:first-child {
        opacity: 0;
    }

    #hamburger.switch div:nth-child(2) {
        transform: rotate(45deg);
        transform-origin: center center;
    }

    #hamburger.switch div:last-child {
        transform: rotate(-45deg);
        transform-origin: center center;
        bottom: .44em;
    }

/*
    #menu {
        margin-left: 100%;
        width: 300px;
        transition: all .2s ease-in;
        background: #fff;
        font-size: 1.3em;
        position: relative;
        top: -1.7em;
    }
*/
/*

    #menu.on {
        margin-left: 0;
        transition: all .5s ease-out;
        
    }
*/

    #menu li a {
        display: block;
        padding: 1.5em;
        text-align: center;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        color: #ef9840;
        max-height: 2em;
    }

    #menu li:last-child a {
        border-bottom: none;
    }
    
    #menu li a:hover {
        color: #504d4d;
    }
    
        
    .comic {
        flex-direction: column;
        margin-top: 20px;
    }
    
    .comic h3 {
        width: 30vw;
        padding: .3em;
    }
    
    .content {
        margin-top: .5em;
        width: 70vw;
    }                
    
    .content img {
        width: 70vw;
    }
    
    
    
    
    
}
    

@media screen and (max-width:768px) {

    #hamburger {
        margin-top:  3%;
    }


    #career .orange {
        width: 100vw;
    }    
    
    main div.top img,
    main div.top {
        height: 50vh;
    }
    
    footer div:nth-of-type(1) img {
        width: 50px;
    }

    footer div:nth-of-type(2) img {
            width: 100px;
        }

    footer div:nth-of-type(3) img {
            width: 30px;
        }

    footer div:nth-of-type(4) img {
            width: 60px;
        }

    footer div:nth-of-type(5) img {
            width: 50px;
        }

    
    div#toplogo {
        display: inline-block;
        width: 50vw;
    }
    
    div#toplogo img {
        width: 50vw;
    }
    
    #hamburger {
    }
    
    h1 {
        font-size: 1.2rem;
    }
    
    section.first .what h1#smaller {
        font-size: 1rem;
    }
    
    div.rectangle h1 {
        font-size: 1.4rem;
    }
  
    
    section.two .orange,
    section.two .blue,
    {
        width: 100vw;
        margin-bottom: 50px;
    }
    
    div.sub,
    div.suborange {
        order: 0;
        width: 90vw;
        height: 40vw;
    }
    
    div.suborange img {
        object-fit: cover;
        font-family: 'object-fit: cover';
        width: 90vw;
        height: 40vw;
    }
    
    
    div.blue,
    section.two div.orange {
        order: 1;
        width: 100vw;
        height: auto;
        padding-top: 1.5em;
    }
    
    div.blue {
        padding: 1em 0;    
    }
    
    section.two div.sub img {
    width: 90vw;
    height: 40vw;
    object-fit: cover;
    object-position: bottom;
    font-family: 'object-fit: cover; object-position: bottom';
    }
    
    .videocontainer,
    section.videobl .video,
    #pr{
        width: 90%;
    }

    
/*main*/

    section.videobl div.video {
        order: 1;
    }
    
    section.videobl div.text,
    .video .text,
    section.system div.text,
    section.first div.text {
        order: 2;
        width: 90vw;
/*        text-align: center;*/
    }
    
    .first .text p {
        max-width: 90vw;
    }

    
    .what {
        min-height: 0;
    }
    
    
    section.videobl div.titlebl,
    section.video div.title,
    section.how div.titlebl,
    section.location div.title,
    section.system div.titlebl,
    section.usecase div.titlebl,
    .titlebl,
    section.require div.title,
    section.goal div.titl
    section.first div.what,
    .what,
    section.cmu .titlebl,
    section.collabolator div.title,
    section.almuni .titlebl,
    .title,
    section.engage div.what,
    section.year div.what,
    section.conference div.what,
    section.two #overview,
    section.four div.orange {
        order: 0;
        width: 100vw;
        padding: 1em 0;
        margin-bottom: 0;
    }
    
    section.videobl,
    section.video,
    section.how,
    section.location,
    section.system,
    section.year,
    section.conference,
    section.usecase,
    section.require,
    section.goal,
    section.first,
    section.cmu,
    section.collabolator,
    section.almuni,
    section.engage,
    section.heads,
    section.two,
    section.four {
        flex-direction: column;
        align-items: center;
        border-top: none;
    }

    
      
    section.first div.what {
        min-height: auto;
    }

    
    section.year div.what br,
    section.conference div.what br {
        display: none;
        
    }

    section.videobl div.titlebl br,
    section.how br,
    section.first div.what br {
        display: none;
    }
    
    #project-wrap {
        display: flex;
        width: 90%;
        justify-content: space-between;
    }
    
    div.orange {
        height: auto;
    }
    
    div.orange br {
        display: none;
    }
    
/*top*/
    
    
    section.four .orange h1:hover,
    .link h1:hover
    {
        transform: scale(1.1);
    }
    
    section.four .orange h1,
    .link h1 {
        
    }
/*navcog*/

    div.container2 {
        display: flex;
        justify-content: space-around;
        width: 100vw;
    }
    
    h3 {
        font-size: 1.1rem;
        line-height: 1.3em;
    }
    
    how .boxbl,
    location .boxor {
        width: 30vw;
        height: 8vh;
        padding: 1em;
    }
    
    div.container p {
        margin: 1em;
    }
    
    section.system div.system {
        order: 1;
        width: 90vw;
    }
    
    div.system img {
        width: 90vw;
    }
    
    ol {
        text-align: left;
    }
    
    .circle,
    .circle img {
        width: 35vw;
        height: 35vw;
    }

/**about*/
    
    
    div.floating img#wordmark {
        width: 90vw;
    }
    
    
/*Cabot*/
    
    .goal .container,
    .goal .container:nth-of-type(3) {
        width: 90vw;
    }
    
    div.find figcaption,
    div.avoid figcaption {
        font-size: .4rem;
    }
    
    .find figure,
    .avoid figure {
        width: 30vw;
        height: 40vw;
    }
    
    .content {
        margin-top: .5em;
        width: 90vw;
    }                
    
    .content img {
        width: 90vw;
    }
    

/*publication*/
    div.search {
        width: 90vw;
        text-align: center;
        margin: 20px 0;
    }
    
    .search ul {
        list-style: none;
    }
    
    section.year div.search {
        display: inline-flex;
        flex-direction: column;
    }
    
    section.year div.search a {
        font-size: 1.3rem;
        line-height: 1.8em;
    }
    
    
/*projects*/
    
    section.mainprojects {
        flex-direction: column;
        align-items: center;
    }
    
    div.eachpro {
        flex-direction: row;
        width: 90vw;
        margin: 50px 0;
        align-items: center;
    }
    
    div eachpro div.text {
        width: 50vw;
        height: auto;
    }
    
    div.logo img,
    div.logo {
        width: 25vw;
        height: 25vw;
    }
    
    div.logo:hover {
        transform: scale(1.1);
    }
 

    .usecase .text {
        width: 90vw;
    }
    
/*publication*/
    
    section.by div.title,
    section.by div.title h1 {
        display: none;
    }

    section.by {
        justify-content: center;
    }
    
    div.search a {
        font-size: 1rem;
    }
    
    section.paper {
        width: 90vw;
    }
    
    
    div.searchbox a {
        font-size: 1rem;
    }
    
    section.paper {
        margin-top: 20px;
    }
    
    p.name {
        font-size: .9rem;
        padding-top: 15px;
    }
    
    p.author,
    p.conference {
        font-size: 0.8rem;
    }
    
/*career*/
    .bigwrap {
        width: 90vw;
    }
    
    .requirement {
        max-width: none;
    }

    .download {
	max-width: none;
    } 
    
/*member*/
    .collabolator h1 {
        transform: none;
    }
    
    div.member {
       width: 100%; 
    }
    
/*navcog*/

    .container2 {
        flex-direction: column;
        width: 100vw;
        align-items: center;
    }
    
    .container {
        width: 90vw;
    }
    
    .boxbl,
    .boxor {
        width: 84vw;
        padding: 3vw;
        height: auto;
    }
    
    .circle,
    .circle img {
        width: 50vw;
        height: 50vw;
    }
    
    .location li {
        margin: 5px;
    }
    
    .location ul {
        width: 90vw;
    }
    
}
    
@media screen and (max-width:480px) {
    
    
/*main*/
    
    main div.top,
    main div.top img{
        height: 70vw;
    }
    
    
    section.three {
        flex-direction: column;
        align-items: center;
    }
    
    .link {
/*        background-color: #a2d5f2;*/
        width: 90vw;
        height: 30vw;
    }
    
    section.three div:nth-of-type(1),
    section.three div:nth-of-type(2) {
        margin-bottom: 15px;
    }
    
    section.three div:last-child {
        margin-bottom: 50px;
    }
    
    section.four #project-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
/*        width: 100%;*/
    }

    section.four div:nth-of-type(2) {
        order: 1;
    }
    
    section.four div:nth-of-type(3) {
        order: 2;
    }
    
    section.four div:nth-of-type(4) {
        order: 3;
    }
    
    section.four .project {
        width: 50vw;
        height: 50vw;
        margin: 10px;
    }
    
    .project img {
        width: 45vw;
        height: 45vw;
    }
    
    h5 {
        text-align: center;
        line-height: 1.5em;
    }
    
    footer div:last-child {
        margin: 0 15px;
    }
    
    footer p {
        display: none;
    }
    
    section.three .link img {
        width: 90vw;
        height: 30vw;
    }
    
    .head {
        height: 40vh;
        width: 100vw;
    }
    
    .head img {
        height: 40vh;
    }
    
    main div.head img {
        height: 40vh;
    }

    
    

    
/* main flex*/
    
/*
    section.first,
    section.heads {
        flex-direction: column;
        align-items: center;
    }
*/
    
    
    div.what br {
        display: none;
    }
    
    .first .text,
    section.heads div.text {
        width: 90vw;
    }
    
/*about*/
    div.each {
        padding: 0;
        flex-direction: column;
        align-items: center;
    }
    
    section.heads div.text {
/*        text-align: center;*/
        padding-left: 0;
        width: 90vw;
    }
    
    section.heads div.text h4 {
        text-align: center;
        margin: 10px 0;
    }
    
    section.videobl div.text {
        width: 90vw;
        text-align: left;
    }
    
    
     
/*navcog*/
    
/*
    .container2 {
        flex-direction: column;
        width: 100vw;
        align-items: center;
    }
    
    .container {
        width: 90vw;
    }
    
    .boxbl,
    .boxor {
        width: 84vw;
        padding: 3vw;
        height: auto;
    }
    
    .circle,
    .circle img {
        width: 50vw;
        height: 50vw;
    }
    
    .location li {
        margin: 5px;
    }
    
*/
/*projects*/
    
    div.eachpro {
        flex-direction: column;
        width: 90vw;
        margin: 50px 0;
        align-items: center;
    }
    

    
    div.logo img,
    div.logo {
        width: 50vw;
        height: 50vw;
    }
    
    
/*publication*/
    

    
 
/*career*/
    
    .bigwrap {
        width: 90vw;
    }
    
    .requirement {
        width: 90vw;
        margin: 0;
    }

    .apply, .download {
	margin: 20px 10px;
    } 
    
    .download p,
    .apply a {
        font-size: 1rem;
    }
}