/* max-width and min-width is the size of the screen not the device----------- */
/* max-device-width and min-device-width is the size of the device not the screen----------- */

/* Desktop and Laptop, min-width equals the container size----------- */
/* min-width, the minimum and up----------- */
@media all 
and (min-width: 550px) {

	body {
		font-family: "neulis-neue", sans-serif;
		font-weight: 300;
		font-style: italic; 
		font-size: 1.3vw; /*sets a font size to the whole site*/
		line-height: 1.3em; /*sets a font height or leading to the whole site*/
		background-color: #f5f5f5;
		color: #1D1D1B; /*sets a font color to the whole site*/ 
		margin: 1em 0em;
	}


	b {
		font-weight: 450;
	}

	header {
		background-color: transparent;
		padding: 1em 4em;
		text-align: right;
		font-size: 1.5em;
	}

	.stay {
		color: #ff66c4;
	}

	a {
		text-decoration: none;
		font-weight: 350;
		color: #45A4AD;
	}

	nav {
		margin-right: -1em;
	}

	nav a {
		color: #1d1d1b;
		margin-left: 1em;
	}

	nav a:hover {
		background-color: #b0ff4a;
	} 

	footer {
		clear: both;
		text-align: center;
	}

	h1, h3, p {
		font-weight: 350;
	}

	h2 {
		font-weight: 350;
		color: #ff66c4;
		font-size: 2.5vw;
	}

	h6 {
		font-size: 1.5vw;
		background-color: #b0ff4a;
		color: #1d1d1b;
		margin: .5em 0em;
		padding: .5em;
		border-radius: 1em;
		width: 7em;
		text-align: center;
		clear: both;
	}

	img {
		width: 100%;
		margin-bottom: .5em;
	}

	article {
		padding: 0em 4em;
		clear: both;
	}

	section {
		clear: both;
	}

	/* PAGE ONE HERO SECTION */

	#hero {

	}

	.scroll2 {
		margin: 4em -4em 2em;
		display: flex;
    	overflow-x: auto;
    	scroll-snap-type: x mandatory;
      	gap: .2em;
      	padding: 1em 0em;
      	white-space: nowrap;
	}

	.gallery-item {
      	display: inline-block;
      	width: 100%;
      	vertical-align: top;
    }

    .gallery-item img {
      	width: 100%;
    }

	#hero2 {
		position: relative;
  		float: right;
	}

	#hero2 b {
		background-color: #b0ff4a;
	}

	/* PAGE ONE WORK SECTION */

	#featured {
		background-image: linear-gradient(#f5f5f5, transparent, transparent, transparent, #b0ff4a), 
              url('../images/graph-paper.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		min-height: 150vh;
	}

	#featured h2 {
		padding: 2em 1em 1em;
	}

	#featured a {
		margin-left: 0em;
		color: #1D1D1B;
	}

	#featured h6:hover {
		margin-left: 0em;
		background-color: #ff66c4;
		color: #1d1d1b;
	}

	.column1 {
		width: 32%;
		float: left;
		margin-right: 2%;
		text-align: left;
	}

	.column2 {
		width: 32%;
		float: left;
		text-align: left;
	}

	.column3 {
		width: 32%;
		float: right;
		text-align: left;
	}

	/* PAGE ONE ABOUT SECTION */

	#about {
		background-color: #b0ff4a;
		padding: 1em 4em;
		overflow: auto;
	}

	#about h2 {
		padding: 0em 0em 1em;
	}

	#about div {
		padding: 2em 0em;
		float: left;
		width: 60%;
	}

	#about img {
		float: right;
		width: 30%;
		padding: 1em 0em;
	}

	#about h6 {
		margin-top: 1em;
		background-color: #ff66c4;
	}

	#about a {
		color: whitesmoke;
		margin-left: 0em;
	}

	#about h6:hover {
		margin-left: 0em;
		background-color: #1d1d1b;
	}

	.spacer1 {
		height: 25vh;
		background-image: linear-gradient(to bottom, #b0ff4a, transparent);
	}

	.spacer2 {
		height: 25vh;
		background-image: linear-gradient(to top, #b0ff4a, transparent);
		clear: both;
	}


	/*PAGE TWO */

	.page2 {
		text-align: center;
	}

	#csumb br {
		clear: both;
	}

	.projects {
		padding: 0em 7.5em;
	}

	.projects h2 {
		font-size: 2vw;
		line-height: 3vw;
	}

	.pics1 img {
		width: 49.5%;
	}

	.pics2 img {
		width: 49%;
	}

	.pics2 div {
		width: 49.5%;
	}

	.image1 {
		float: left;
	}

	.image2 {
		float: right;
	}

	.section1 {
		float: left;
	}

	.section2 {
		float: right;
	}


	.bar {
		margin: 2em 0em;
	}

	.tamc1 img {
		width: 49.5%;
		float: left;
	}

	#text {
		width: 49.5%;
		float: right;
	}

	#tamc br {
		clear: both;
	}

	#gallery {
		background-color: #b0ff4a;
		padding: 1em 4em;
		overflow: auto;
		clear: both;
		text-align: center;
	}


	#gallery h6 {
		background-color: #ff66c4;
		width: auto;
		text-align: left;
		margin-left: .5em;
		padding-left: 1em;
	}

	#gallery a {
		color: whitesmoke;
		margin-left: 0em;
	}

	#gallery h6:hover {
		margin-left: .5em;
		background-color: #1d1d1b;
	}

	.scroll {
		display: flex;
    	overflow-x: auto;
    	scroll-snap-type: x mandatory;
      	gap: 1em;
      	padding: 1em 0em;
      	white-space: nowrap;
	}

	.scroll img {
		width: 40%;
	}
	.gallery-item {
      	display: inline-block;
      	width: 100%;
      	vertical-align: top;
    }

    .gallery-item img {
      	width: 100%;
    }

    .text-box {
      	margin: .3em 1em 0em 0em;
      	width: 500px;
      	overflow: auto;
    }

    /* PAGE THREE */

    .meet {
    	padding-top: 2em;
    	text-align: center;
    }

    .meet b {
    	background-color: #b0ff4a;
    }

    .meet h1 {
    	margin-bottom: 2em;
    }

    .meet1 {
    	width: 43%;
    	float: left;
    }

    .meet2 {
    	width: 55%;
    	float: right;
    	text-align: left;
    }

    .press img {
		width: 100%;
	}

	.press h6 {
		margin-right: .5em;
	}

	.press a {
		color: #1D1D1B;
	}

	.press div {
		width: 49.5%;
		color: #1D1D1B;
	}

	.image3 {
		float: left;
	}

	.image4 {
		float: right;
	}

	.section3 {
		float: left;
	}

	.section3 div {
		width: 49%;
	}

	.section4 {
		float: right;
	}

	.section4 div {
		width: 49%;
	}


}



/* Sizes of different screens */

	@media all and (max-width: 550px) {


	body {
		font-family: "neulis-neue", sans-serif;
		font-weight: 300;
		font-style: italic; 
		font-size: 2.5vw; /*sets a font size to the whole site*/
		line-height: 2em; /*sets a font height or leading to the whole site*/
		background-color: #f5f5f5;
		color: #1D1D1B; /*sets a font color to the whole site*/ 
		margin: 1em 0em;
	}


	b {
		font-weight: 450;
	}

	header {
		margin-top: 2em;
		text-align: center;
		font-size: 2em;
	}

	.stay {
		color: #ff66c4;
	}

	a {
		text-decoration: none;
		font-weight: 350;
		color: #45A4AD;
	}

	nav a {
		color: #1d1d1b;
		margin: 0em .3em;
	}

	nav a:hover {
		background-color: #b0ff4a;
	} 

	footer {
		clear: both;
		text-align: center;
	}

	h1 {
		font-weight: 350;
	}


	h2 {
		font-weight: 350;
		color: #ff66c4;
		font-size: 2em;
	}

	h3 {
		font-weight: 350;
		font-size: 1.5em;
	}

	h6 {
		font-size: 1.5em;
		background-color: #b0ff4a;
		color: #1d1d1b;
		margin: .5em 0em;
		padding: .5em;
		border-radius: 2em;
		width: 7em;
		text-align: center;
		clear: both;
	}

	p {
		font-weight: 350;
		font-size: 1.5em;
	}

	img {
		width: 100%;
		margin-bottom: .5em;
	}

	article {
		padding: 0em 3em;
		clear: both;
	}

	section {
		clear: both;
	}

	/* PAGE ONE HERO SECTION */

	#hero {
		padding: 10em .5em 8em;
	}

	.scroll2 {
		display: none;
	}

	#hero2 {
		position: relative;
  		float: right;
	}

	#hero2 b {
		background-color: #b0ff4a;
	}

	/* PAGE ONE WORK SECTION */

	#featured {
		background-image: linear-gradient(#f5f5f5, transparent, transparent, transparent, transparent, transparent, #b0ff4a), 
              url('../images/graph-paper.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		text-align: left;
		min-height: 200vh;
	}

	#featured h2 {
		padding: 2em 1em 1em;
		text-align: center;
	}

	#featured a {
		margin-left: 0em;
		color: #1D1D1B;
	}

	#featured h6:hover {
		margin-left: 0em;
		background-color: #ff66c4;
		color: #1d1d1b;
	}

	.column1 {
		margin-bottom: 2em;
	}

	.column2 {
		margin-bottom: 2em;
	}

	.column3 {
		margin-bottom: 2em;
	}


	/* PAGE ONE ABOUT SECTION */

	#about {
		margin-top: -2em;
		background-color: #b0ff4a;
		padding: 1em 4em;
		overflow: auto;
	}

	#about h2 {
		padding: 0em 0em 1em;
		text-align: center;
	}

	#about img {
		width: 100%;
		padding: 1em 0em;
	}

	#about h6 {
		margin-top: 1em;
		background-color: #ff66c4;
	}

	#about a {
		color: whitesmoke;
		margin-left: 0em;
	}

	#about h6:hover {
		margin-left: 0em;
		background-color: #1d1d1b;
	}

	.spacer1 {
		height: 25vh;
		background-image: linear-gradient(to bottom, #b0ff4a, transparent);
	}

	.spacer2 {
		height: 25vh;
		background-image: linear-gradient(to top, #b0ff4a, transparent);
		clear: both;
	}


	/*PAGE TWO */

	.page2 {
		text-align: center;
	}

	.page2 h2 {
		margin: 3em 0em;
	}

	#csumb br {
		clear: both;
	}

	.projects {
		padding: 0em 3em;
	}

	.projects h2 {
		font-size: 2em;
	}

	.pics1 img {
		width: 100%;
	}

	.pics2 img {
		width: 100%;
	}

	.pics2 div {
		width: 49.5%;
	}

	.image1 {
		float: left;
	}

	.image2 {
		float: right;
	}

	.section1 {
		float: left;
	}

	.section2 {
		float: right;
	}


	.bar {
		margin: 2em 0em;
	}

	.tamc1 img {
		width: 100%;
	}

	#text {
		width: 100%;
	}

	#tamc br {
		clear: both;
	}

	#temp {
		display: none;
	}

	#gallery {
		margin-top: -2em;
		background-color: #b0ff4a;
		padding: 1em 4em;
		overflow: auto;
		clear: both;
		text-align: center;
	}


	#gallery h6 {
		background-color: #ff66c4;
		width: auto;
		text-align: left;
		margin-left: .5em;
		padding-left: 1em;
	}

	#gallery a {
		color: whitesmoke;
		margin-left: 0em;
	}

	#gallery h6:hover {
		margin-left: .5em;
		background-color: #1d1d1b;
	}

	.scroll {
		display: flex;
    	overflow-x: auto;
    	scroll-snap-type: x mandatory;
      	gap: 1em;
      	padding: 1em 0em;
      	white-space: nowrap;
	}

	.scroll img {
		width: 40%;
	}
	.gallery-item {
      	display: inline-block;
      	width: 100%;
      	vertical-align: top;
    }

    .gallery-item img {
      	width: 100%;
    }

    .text-box {
      	margin: .3em 1em 0em 0em;
      	width: 250px;
      	overflow: auto;
    }

    /* PAGE THREE */

    .meet {
    	padding-top: 2em;
    	text-align: center;
    }

    .meet b {
    	background-color: #b0ff4a;
    }

    .meet h1 {
    	margin-bottom: 2em;
    }

    .meet2 p {
    	text-align: left;
    }

    .press img {
		width: 100%;
	}

	.press h6 {
		margin-bottom: 3em;
	}

	.press a {
		color: #1D1D1B;
	}

	.press div {
		color: #1D1D1B;
	}







}


/* Smartphones (portrait and landscape) ----------- max-width: 500px and less */

/* iPads (portrait and landscape) ----------- 500px–900px */

/* Desktops and laptops ----------- min-width: 900-980px */

/* Large screens ----------- min-width: 980px and up */