/* SECTION STYLING */
		* {
		  margin: 0;
		  padding: 0;
		}

    	.fullBody{
		   background-image: url(images/h.png);
		   background-size: 100px 100px;
		   background-attachment: fixed;
		   background-color: #f8f3ea;
		   padding: 0px;

    	}

    	.section{
    		width: 100%;
    		height: auto;
    		margin: 0px;
  			text-align: center;
			padding-bottom: 8vw; 
			padding-top: 2vw;

    	}

    	.adjustedSection{
    		height: auto;
    	}


    	.section h1{
			font-size: 8vw;
			animation: liftIn 1s, fadeIn 1s;
    	}

    	.section h2{
			font-size: 6vw;
			animation: liftIn 1s, fadeIn 1s;
			font-family:"Amatic SC", sans-serif;
			padding-bottom: 3vw;
    	}


    	.front{
   			/*background-color: #6eb2b6;*/
   			background-color: #56bbc1;
    		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dbdbdb' fill-opacity='0.28'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
			/*background-image: url(./testBackgroundImage.jpg);*/
  			text-align: center;
 			font-family: "Amatic SC", sans-serif;
			color: white;   
			padding-top: 0vw;
			padding-bottom: 2vw;

    	}


    	.front h2{
    		font-size: 4vw;
    	}

    	/* GRID STYLING */

		.grid{
			display:grid;
			grid-auto-rows: minmax(0vw, auto);
			grid-gap:0.5em;
			justify-items: stretch; /* width addjustment of box*/
			align-items: stretch; /* heigh adjustment of box */
			margin-left: 8vw;
			margin-right: 8vw;
		}

		.grid div{
			/*background-color: #222;*/
			justify-self: center;
		}

		.grid img{
			width:100%;
			height:100%;
		}

		.twoRow{
			grid-template-columns: 1fr 1fr;
			justify-items: center;
		}

		.twoRow div{

		}

		.threeRow{
			grid-template-columns: 1fr 1fr 1fr;
		}

		.fourRow{
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}


		/* OTHER */

		.img-logo{
			width: 30vw;
			height: auto;
			animation: liftIn 2s, fadeIn 2s;
		}

		.basicButton{
			width: 150px;
			height: 40px;
			background-color: white;
			padding-top: 20px;
			color: #f6a2a2;
		}

		.croppedImg{
			object-position: top;
		    width: 100%;
			height: 100%;
			object-fit: cover;
			margin: 0;
			margin-bottom: 0;

/*			border: 0.3vw #834637 solid;
			padding: 0.7vw;*/
		}

		.croppedImg__overlay{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			opacity: 0;
			transition: opacity 0.4s;

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: white;
			font-family: comfortaa;
			font-size: 3vw;


		}

		.image{
			position: relative;
			width: 33vw; 
			height:30vw;
			cursor:pointer;
		}

		.smallImage{
			width: 25vw;
			height: 25vw;
		}

		.verySmallImage{
			width: 15vw;
			height: 15vw;
		}

		.profileImage{
			position: relative;
			width: 35vw;
			height: 35vw;
			cursor: pointer;
		}


		.croppedImg__overlay > *{
			transform: translateY(20px);
			transition: transform 0.4s;
		}

		.croppedImg__overlay:hover{
			opacity: 1;
		}

		.croppedImg__overlay:hover > *{
			transform: translateY(0);
		}		

		.fade-in {
			animation: fadeIn 2s;
		}
 
		.smalltext{
			font-size: 1.5vw;
			margin: 0.25vw;
		}


		.newPage{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
  			/*text-align: center;*/
		}

		.newPage a:hover{
			color: black;
		}

		.newPage a{
			font-size: 3vw; 
			font-weight: bold; 
			font-family: comfortaa; 
			cursor: pointer; 
			color: #5a5651;
			text-decoration: none;
			transition: color 0.4s;
		}

		.clickableTransition a:hover{
			color: black;
		}

		.clickableTransition a{
			transition: color 0.4s;
		}

		.paragraphDescription{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: left;

			width: 38vw; 
			font-size: 1.5vw; 
			font-family: comfortaa; color: white
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
			}
			
			to {
				opacity: 1;
			}		
		}

		@keyframes liftIn {
			from {
				transform: translateY(50px);
			}
			
			to {
				transform: translateY(0px);
			}		
		}



		.socials{
			color: #250d55;
			font-size: 2vw;
			font-family: comfortaa;
		}

		.socials a{
			text-decoration: none;
			font-size: 3vw;
			color: #250d55;
		}

		.socials div{
			margin: 1vw;
		}


	.mobile_only{
		display:none;
	}

	.desktop_only{
		display:grid;
	}

	.inGridTitle{
		padding-top: 8vw;
	}

    .mobile_heading{
    	padding-top: 2vw;
    }


	@media only screen and (max-width: 768px){
	    .mobile_heading{
	    	padding-top: 20vw;
	    }

		.twoRow{
			grid-template-columns: 1fr;
		}

		.threeRow{
			grid-template-columns: 1fr;
		}

		.fourRow{
			grid-template-columns: 1fr;
		}

		.smallImage{
			width: 85vw;
			height: 60vw;
		}

		.verySmallImage{
			width: 85vw;
			height: 60vw;
		}

		.image{
			width: 85vw;
			height: 60vw;			
		}


		.img-logo{
			width: 50vw;
			height: auto;
		}

		.section h2{
			font-size: 15vw;
			margin-top: 5vw;

		}

		.front{
			height: auto;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 25vw;
			padding-top: 25vw;
		}

		.front h1{
			font-size: 20vw;
		}

		.front h2{
			font-size: 9vw;
		}


		.newPage a{
			font-size: 8vw;
		}

		.grid{
			grid-gap: 10vw;
			margin-top: 5vw;
		}

		.socials{
			font-size: 5vw;
		}	

		.socials a{
			font-size: 10vw;
		}

		.croppedImg__overlay{
			font-size: 7vw;
		}

		.smalltext{
			font-size: 4vw;
		}

		.navbar{
			display:none;
		}

		.mobile_only{
			display: block;
		}

		.desktop_only{
			display:none;
		}

		.inGridTitle{
			padding-top: 0vw;
		}

	}

	.centered{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.navbar{
		height: 4vw;
		font-size: 2vw;
	}

	.desktopNavBar a{
		text-decoration: none;
		color: white;
	}