/*------------------------------------------ 
Home Page 
-------------------------------------------*/

html {
  scroll-behavior: smooth;
}

body {
	font-family: sofia-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
	background: #fff;
	color: #60313B;
	min-width: 320px;
	text-align: left;
	line-height: 1.5;
	font-size: 1.2em;
}

body a{
	color: #EF4242;
	transition: .3s ease;
}

body a:hover {
	color: #EF4242;
}

body { 
    animation: fadeInAnimation ease 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 
  
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 


h1, h2, h3, h4, h5 {
	z-index:3;
}



.float-up {
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-name:float-up;
    -moz-animation-name:float-up;
    -o-animation-name:float-up;
    animation-name:float-up;
    -webkit-animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    position:absolute;
    top:500px;
}
@-webkit-keyframes float-up {
    0% {
        top: 400px;
        opacity:0;
    }
    25% {
        opacity:1;
    }
    
    100% {
        top:60px;
    }
}
@-moz-keyframes float-up {
    0% {
        top:400px;
        opacity:0;
    }
    25% {
        opacity:1;
    }
    
    100% {
        top:60px;
    }
}
@-o-keyframes float-up {
    0% {
        top:400px;
        opacity:0;
    }
    25% {
        opacity:1;
    }
    
    100% {
        top:60px;
    }
}
@-keyframes float-up {
    0% {
        top:400px;
        opacity:0;
    }
    25% {
        opacity:1;
    }
    
    100% {
        top:60px;
    }
}

/*
|----------------------------------------------------------------
| Navigation
|----------------------------------------------------------------
*/


.header {
    position: relative;
    top: 0;
    left:0;
    width: 100%;
    align-items: center;
    z-index: 99;
    transition: all .3s ease;
}

.header-inner {
	margin-top:30px;
	justify-content: space-between;
}

.logo-bubble {
	position: absolute;
	right:20px;
	top:20px;
	height:90px;
	width:90px;
	padding:30px 20px 20px 20px;
	background-color: #FEC251;;
	border-radius: 30px;
	text-align:center;
}

.nav-list li {
	margin-top:30px;
	margin-left:50px;
	font-size: 20px;
}

nav#main a:hover, nav#main a:active {
	text-decoration: none;
	border-bottom: 5px solid;
	border-color:#EF4242;
}
nav#main a{
	text-decoration: none;
	color: #60313B;
	transition: all .3s ease;
	padding:10px;
	border-bottom: 5px solid;
	border-color:rgba(239,66,66, 0);
}




/*
|----------------------------------------------------------------
| MOBILE NAV
|----------------------------------------------------------------
*/


.mobile-nav{
	height:100%;
}

#menuToggle
{
    display: block;
    position: fixed;
    top: 40px;
    left: 30px;
    z-index: 99;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #60313B;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #60313B;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #60313B;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #60313B;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  top:-20px;
  left:-10px;
  width: 100vw;
  height:500px;
  margin: -20px 0 0 -20px;
  padding: 50px;
  padding-top: 60px;
  color: #60313B;
  box-shadow: 0px 0px 20px -20px #ff9214;

  
  background: #FFD880;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
  text-align:center;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ div
{
  transform: none;
}


@media only screen and (max-width: 769px) {
	.desktop-nav{
		display: none;
	}
}

@media only screen and (min-width: 769px) {
  .mobile-nav {
    display:none;
  }
}

.social-menu{
	margin:auto;
	text-align: center;
	margin-top:30px;
}

.social-icon img{
	width:50px;
	padding-right:10px;
}

.social-icon img:hover{
	filter: brightness(100);
}

/*
|----------------------------------------------------------------
| Banner
|----------------------------------------------------------------
*/

.position-top{
	background-position:center top;
}

.banner{
	position:relative;
	height:85vh;
}

.banner-inner{
	margin-top:80px;
}



.pencil{
	position:absolute;
	right:40px;
	margin-top:150px;
	width:80%;
	max-width:500px;
	padding-right:0;
}

.social{
	width:25px;
	fill:#463045;

}

.social-1{
	margin-right:20px;
	margin-left:5px;
}

.social:hover{
	fill:#ef4242;
}


.bg-center{
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
}

.bg-contain{
	background-size:contain;
	background-position:center;
	background-repeat: no-repeat;
}

/*
|----------------------------------------------------------------
| About Section
|----------------------------------------------------------------
*/

@keyframes wiggle {
  20%  { transform: rotate(20deg);  }
  40%  { transform: rotate(-20deg); }
  60%  { transform: rotate(10deg);  }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg);    }
}

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

@keyframes jiggle {
  20%  { transform: translate(0, 20px);  }
  40%  { transform: translate(0, -20px); }
  60%  { transform: translate(0, 10px);  }
  80%  { transform: translate(0, -5px); }
  100% { transform: translate(0, 0px);    }
}

.jiggle:hover {
  animation: jiggle 1s ease;
  animation-iteration-count: 1;
}

.about-before {
	background-image:url(../images/about-before.svg);
	height: 150px;
	background-repeat: repeat-x;
	background-size: 150%;
	background-position: bottom;
	margin-bottom:-5px;
}

.about{
	background-color: #FFD880;
	padding: 80px 0;
}

.about-after {
	background-image:url(../images/about-after.svg);
	height: 150px;
	background-repeat: repeat-x;
	background-size: 150%;
	background-position: top;
}

h2 {
	font-size:40px;
	font-family: 'omnes-pro', sans-serif;
	text-align: center;
	margin: auto;
}

.about h4 {
	text-align: center;
}

.work{
	margin-top:50px;
	margin-bottom: 20px;
}

.pie{
	margin-top:20px;
	text-align: center;
}

.pie a {
	font-size:20px;
	color: #60313B;
	transition: .3s;
	margin-top:20px;
}

.pie a:hover{
	text-decoration: underline;
}

.social-list{
	justify-content: center;
	margin-top:20px;
}

.about h4 {
	margin-top: 30px;
	margin-bottom: 30px;
}

/*
|----------------------------------------------------------------
| Flickity
|----------------------------------------------------------------
*/

.flickity-button {
	background:transparent;
}

.cell{
	height:200px;
	width:100%;
}

.main-carousel {
	margin-bottom: 30px;
}

.flickity-viewport {
  transition: height 0.2s;
}

@media only screen and (min-width: 768px){
	.flickity-prev-next-button.previous{
		left:-50px;
	}
	.flickity-prev-next-button.next{
		right:-50px;
	}
}

.hnn-carousel-1{
	background-image: url(../images/hnn/mascot-1.jpg);
}

.hnn-carousel-2{
	background-image: url(../images/hnn/mascot-2.jpg);
}

.hnn-carousel-3{
	background-image: url(../images/hnn/mascot-3.jpg);
}

/*
|----------------------------------------------------------------
| Home Page Grid
|----------------------------------------------------------------
*/

.is-absolute{
	position:absolute;
}

.grid-wrapper{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin:auto;
}

.is-60, .is-50, .is-40, .is-100{
	flex-basis:100%;
	max-width:100%;
}

.proj-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:2;
/*    transform: scale(1);
    transition: all .35s ease-out;*/
}

.grid-1{
	background-image: url(../images/wamps-cover.jpg);
}

.grid-frog-cult{
	background-image: url(../images/frog-cult/fc-banner.jpg);
}

.grid-2{
	background-image: url(../images/taste-cover.jpg);
}

.grid-3{
	background-image: url(../images/beaty-cover.jpg);
}

.grid-4{
	background-image: url(../images/climatechange.jpg);
}

.grid-5{
	background-image: url(../images/cc-cover.jpg);
}

.hnn-thumb{
	background-image: url(../images/hnn/hnn-cover.jpg);	
}

.fc2021-thumb{
	background-image: url(../images/fc2021/fc2021-thumb.jpg);	
}

.lana-thumb{
	background-image: url(../images/lana-banner.jpg);
}

.awe-thumb{
	background-image: url(../images/awe-cover.jpg);
}

.smv-thumb{
	background-image: url(../images/smv-banner.png);
}

.firstline-thumb{
	background-image: url(../images/firstline-thumb.jpg);
}

/*.img-wrap:hover .proj-img {
    transform: scale(1.07,1.07) translateZ(1px);
}*/


.grid-height{
    position: relative;
	margin-bottom:30px;
	height:60vw;
    overflow: hidden;
}

.short{
	height: 45vw;
}

.tall{
	height:65vw;
}

.xtall{
	height:65vw;
}

/*
|----------------------------------------------------------------
| Footer
|----------------------------------------------------------------
*/

footer{
	margin-top:50px;
	text-align:center;
}

footer h2{
	padding-right:15px;
	padding-left:15px;
}


.footer-bg{
	background: #FFD880;
	padding-top:60px;
}

footer a:hover{
	text-decoration: none;
	color: #60313B;
	text-decoration: underline;
}

footer a{
	color: #60313B;
}

footer ul{
	margin-top:15px;
}

footer p {
	font-size: 18px;
	margin: 30px 0;
}

footer .social-list{
	margin-left:-6px;
	justify-content: center;
	margin-top:30px;
}

footer .copyright{
	text-align:center;
}

.other-work{
	margin-top:20px;
}

.thumb-col{
    position: relative;
	margin-bottom:10px;
    overflow: hidden;
    height:30vw;
    transition: all .35s ease-out;
}

.thumb-col:hover{
	opacity:0.7;
}

.thumb1{
	background-image: url(../images/thumb1.jpg);
}

.thumb2{
	background-image: url(../images/thumb2.jpg);
}

.thumb3{
	background-image: url(../images/thumb3.jpg);
}

.thumb4{
	background-image: url(../images/thumb4.jpg);
}

.thumb5{
	background-image: url(../images/thumb5.jpg);
}

.is-30-50{
	flex-basis: calc(50% - 7.5px);
	max-width: calc(50% - 7.5px);
}

.thumb-desc{
	font-weight: 700;
}

.thumb-desc-2{
	margin-bottom: 20px;
}

/*
|----------------------------------------------------------------
| Typography
|----------------------------------------------------------------
*/

h1{
	font-weight: 800;
	font-size: 11vw;
	font-family: 'omnes-pro', sans-serif;
}

h3{
	font-weight: 800;
	font-size: 7vw;
}

.desc{
	top:90px;
	font-size:2.8vw;
}

.type-of-project{
	margin-bottom:5px;
}

.bold {
	font-weight: 700;
	text-transform: uppercase;
}

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}

.in-touch{
	font-family: 'omnes-pro', sans-serif;
	font-weight:700;
	font-size:4vw;
	margin-top:20px;
}

.copyright{
	margin-top:20px;
}


/*------------------------------------------ 
Project Pages
-------------------------------------------*/
@media only screen and (max-width: 768px){
	.no-padding-sm{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.spacer{
	height:20px;
}

.img-contain{
	width: 100%;
	max-width: 100%;
}

.img-margin{
	margin: 20px auto;
}

.project-banner{
	height:50vh;
	margin:auto;
	margin-bottom:40px;
	margin-top: 80px;
}


.p1-banner{
	background-image: url("../images/wamps-cover.jpg");
}

.fc-banner{
	background-image: url("../images/frog-cult/fc-banner.jpg");
}

.p2-banner{
	background-image: url("../images/taste-contents.jpg");
}

.p3-banner{
	background-image: url("../images/beaty-cover.jpg");
}

.cc-banner{
	background-image: url("../images/cc-cover.jpg");
}

.hnn-banner{
	background-image: url("../images/hnn/hnn-cover-mobile.jpg");
}

.awe-banner{
	background-image: url("../images/awe-banner.jpg");
}

.margin-center{
	display:  flex;
	margin:  auto;
}

@media only screen and  (min-width:768px){
	.hnn-banner{
		background-image: url("../images/hnn/hnn-cover.jpg");
	}
}


/*------------------------------------------ 
Margins and padding
-------------------------------------------*/


.mb-30{
	margin-bottom:30px;
}

.mb-50{
	margin-bottom:50px;
}

.mtb-30{
	margin-top: 7.5px;
	margin-bottom: 7.5px;
}

.mtb-15{
	margin-top: 15px;
	margin-bottom: 15px;
}

.mt-50{
	margin-top: 50px;
}

.mt-100{
	margin-top: 100px;
}

.mtb-50{
	margin-top: 50px;
	margin-bottom: 50px;
}

.padding-none{
	padding-left:0;
	padding-right:0 ;
}

.p-35{
	padding: 35px;
}

.text-center{
	text-align: center;
}

.text-sm{
	font-size: .9em;
}

.thought{
	position: relative;
}


.dot{
	background-color: #dedede; 
	height: 15px;
	width: 15px; 
	border-radius: 20px;
	margin: 0 20px;
	display:none;
}



/*------------------------------------------ 
Frog Cult 
-------------------------------------------*/

.fc-gallery{
	margin-left: 15px;
	margin-right: 15px;
}


.fc-gallery-item{
	transition: .4s;
	width: 100%;
}

.fc-gallery-parent{
	width:auto;
	height: auto;
	overflow: hidden;
	margin-top: 7.5px;
	margin-bottom: 7.5px;
	border-radius: 30px;
	transition: 2s ease;
}

.fc-gallery-parent:hover .fc-gallery-item{
	transform: scale(1.1);
	overflow: hidden;
}


/*------------------------------------------ 
Frog Con 2021 
-------------------------------------------*/

.fc2021-cover{
	background-image: url('../images/fc2021/fc2021-cover.jpg');
}


/*------------------------------------------ 
Project 1 - The War Amps 
-------------------------------------------*/
.soft-shadow{
	border-radius: 20px;
	box-shadow: 5px 5px 20px #dedede;
}

.is-red {
	background: #f04b5d;
}

.is-blue {
	background: #0055b8;
}

.is-white {
	background: #fff;
}

.text-white {
	color: #fff;
}

.text-black {
	color: #000;
}

.text-blue {
	color: #0055b8;
}

.project-h1{
	font-weight: 800;
	font-size: 40px;
	font-family: 'omnes-pro', sans-serif;
	margin-top:20px;
}


.p1-elements {
	background-image: url(../images/wamps-elements.svg);
	height:25vh;
}

.p1-stationery {
	background-image: url(../images/wamps-stationery.jpg);
}

.p1-keys {
	background-image: url(../images/wamps-keys.jpg);
}

.p1-bus1 {
	background-image: url(../images/wamps-bus2.jpg);
}

.p1-bus2 {
	background-image: url(../images/wamps-bus1.jpg);
}



.main-carousel .p1-img-1 {
	background-image: url(../images/wamps-website-1.jpg);
}
.main-carousel .p1-img-2 {
	background-image: url(../images/wamps-website-2.jpg);
}
.main-carousel .p1-img-3 {
	background-image: url(../images/wamps-website-3.jpg);
}



/*------------------------------------------ 
Project 2 - tastetest
-------------------------------------------*/

.is-yellow{
	background: #FFD880;
}

.is-red2{
	background: #ef4840;
}

.text-red {
	color: #ef4840;
}

.text-black {
	color: #000;
}

.beyond-meat{
	background-image: url(../images/beyond-meat.jpg);
}

.p2-desc{
	margin-bottom:50px;
}

.p2-desc a:hover{
	color: #000;
}

.editorial-1{
	background-image: url("../images/editorial1.jpg");
}


.editorial-2{
	background-image: url("../images/editorial2.jpg");
}

.editorial-3{
	background-image: url("../images/editorial3.jpg");
}



/*------------------------------------------ 
Project 3 - Ghosts of the Past 
-------------------------------------------*/

.is-navy{
	background: #10213e;
}

.beaty-cover-spread{
	background-image: url("../images/beaty-cover2.jpg");
}

.beaty-closed{
	background-image: url("../images/beaty1.jpg");
}


.beaty-open{
	background-image: url("../images/beaty1b.jpg");
}

.beaty2{
	background-image: url("../images/beaty2.jpg");
}

.beaty3{
	background-image: url("../images/beaty3.jpg");
}

.beaty4{
	background-image: url("../images/beaty4.jpg");
}

.beaty5{
	background-image: url("../images/beaty5.jpg");
}

.beaty6{
	background-image: url("../images/beaty6.jpg");
}

.beaty7{
	background-image: url("../images/beaty7.jpg");
}


/*------------------------------------------ 
Project 4 - Climate Change 
-------------------------------------------*/

::selection {
    background-color: rgb(255, 255, 0);
}

.is-black{
	background: #000;
}

.is-yellow-p4{
	background: rgb(255, 255, 0);
}

.text-yellow-p4{
	color: rgb(255, 255, 0);
}

.yellow-link a{
	transition: all .35s ease-out;
}

.yellow-link a:hover{
	opacity: 0.7;
	color: rgb(255, 255, 0);
	text-decoration: none;
}

.research {
	margin-bottom:15px;
}

.extra-padding{
	padding-top:35px;
	padding-bottom:30px;
}

.research2 li{
	margin-bottom: 15px;
}


.research .number{
	font-size:8vw;
	font-family: 'omnes-pro';
}

.is-20{
	flex-basis: calc(20% - 7.5px);
	max-width: calc(20% - 7.5px);
}

.is-80{
	flex-basis: calc(80% - 7.5px);
	max-width: calc(80% - 7.5px);
}

.climate-change-1{
	background-image: url('../images/climate-change-agenda.jpg')
}

.climate-change-2{
	background-image: url('../images/climate-change-banner.jpg')
}


/*------------------------------------------ 
Project 5 - Cucumber Clinic 
-------------------------------------------*/

.cc-cover{
	background-image: url('../images/cc-cover.jpg');
}

.cc-stationery{
	background-image: url('../images/cc-stationery.jpg');
}

.ar-cover{
	background-image: url('../images/ar-cover.jpg')
}

.ar-1{
	background-image: url('../images/ar-1.jpg')
}

.ar-2{
	background-image: url('../images/ar-2.jpg')
}

.ar-3{
	background-image: url('../images/ar-3.jpg')
}

.ar-4{
	background-image: url('../images/ar-4.jpg')
}

.ar-5{
	background-image: url('../images/ar-5.jpg')
}




/*------------------------------------------ 
Home Page Media Queries 
-------------------------------------------*/

@media only screen and  (min-width:500px){
	h1{
		font-size:50px;
	}
	.desc{
		font-size: 2.5vw;
		top:100px;
	}

	h4{
		font-size:25px;
		margin-top:20px;
		z-index: 2;
		text-align:left;
	}
}

@media only screen and  (min-width:769px){
	.is-30-50{
		flex-basis: calc(33% - 7.5px);
		max-width: calc(33% - 7.5px);
	}
	
	.dot{
		display:flex;
	}

	.mtb-30{
		margin-top: 30px;
	    margin-bottom: 30px;
    }

	.thumb-col{
	    height:200px;
	}

	.about-before, .about-after{
		background-size:contain;
		background-repeat: none;
		height:200px;
	}

	.about {
		padding:50px 0 30px 0;
	}

	.pencil{
		position:absolute;
		right:40px;
		top:60px;
		width:40vw;
		max-width:500px;
		padding-right:0;
		margin-top:-50px;
	}

	.banner{
		padding-top: 50px;
		position:relative;
		height:70vh;
	}

	.banner-inner{
	margin-top:15vh;
	}

	.about h4, .about h2 {
		text-align:left;
	}

	.about .social-list{
		margin-left: -6px;
		margin-top: 30px;
		justify-content: left;
	}

	img .me{
		max-width:200px;
	}

	.work{
		margin-top:100px;
		margin-bottom:50px;
	}



	footer .copyright{
	text-align:right;
	}

	.logo-bubble {
		position: relative;
		margin-left: 30px;
		height:120px;
		width:120px;
		padding:42px 30px 30px 30px;
		background-color: #FEC251;;
		border-radius: 40px;
		text-align:center;
	}

	.proj-footer {
		padding-bottom:60px;
		padding-top:50px;
	}

	.pie{
		text-align: left;
	}

	footer h2{
		padding-right:0;
		padding-left:0;
	}



}

@media only screen and  (min-width:992px){
	.proj-img, .grid-height{
		height:450px;
		transition:.4s;
	}

/*	.proj-img:hover{
		height:390px;
	}*/

	.grid-hover:hover .proj-img,
	.grid-hover:focus .proj-img {
		height:390px;
		/*transform: translate(0, -60px);*/
	}
	


	.short{
		height:500px;
	}

	.tall{
		height:600px;
	}

	.xtall{
		height:700px;
	}

	.is-60{
		flex-basis: calc(60% - 15px);
		max-width: calc(60% - 15px);
	}

	.is-50{
		flex-basis: calc(50% - 15px);
		max-width: calc(50% - 15px);
	}

	.is-40{
		flex-basis: calc(40% - 15px);
		max-width: calc(40% - 15px);
	}

	.grid-desc{
		bottom:0;
		margin-bottom:0;
		position: absolute;
		color:#60313B;
		width: 100%;
		padding-top: 20px;
		
	}
	.grid-title{
		font-size:20px;
		font-weight: 900;
	}



}


/*------------------------------------------ 
Project Page Media Queries 
-------------------------------------------*/

@media only screen and  (min-width:600px){
	.project-h1{
		font-size:50px;
		line-height:1.3;
	}
	.research ul:before{
		font-size:60px;
	}
	.project-banner{
		margin-bottom:60px;
	}
	.p1-elements {
	height:50vh;
	}

	.cell{
	height:600px;
	}

	.research .number{
	font-size:60px;
	}

}




@media only screen and  (min-width:992px){
	.project-banner{
		height:550px;
		margin-bottom:70px;
	}
}


@media only screen and (min-width: 768px){
	.mobile-only{
		display:none !important
	}
}


@media only screen and (max-width: 768px){
	.desktop-only{
		display:none !important
	}
}