.container{
	margin-left:auto;
	margin-right:auto;
}

@font-face{
	font-family: "owners-xnarrow", sans-serif;
	font-style: normal;
	font-weight: 900;
}

@font-face{
	font-family: 'karla';
	src: url('../fonts/Karla-Regular.ttf');
}

@font-face{
	font-family: 'owners-black';
	src: url('../fonts/owners-black.otf');
}

@font-face{
	font-family: 'owners-bold';
	src: url('../fonts/owners-bold.otf');
}

/*.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){


h1{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 7.5vw;
	margin-bottom: 6%;
}

h2{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;

	margin-bottom: 5%;
	font-size: 5.25vw;
}

h3{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size: 4.25vw;
	margin-bottom: 3%;
}

p{	
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;

	font-size: 4vw;
	line-height: 5.25vw;

	color: #414141;
}

.detailsContainer{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.25vw;

	width: 100%;
	margin-bottom: 10%;

	text-align: left;
	width: 87.5%;
	margin-left: auto;
	margin-right: auto;
}

.detailsContainer p{
	font-size: 5vw;
}

.center{
	text-align: center;
}

.flexparent{
	display: flex;
}

.algomalandingpagecontainer{
	width: 100%;
	/*height: 100vh;*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 7%;
}

.algomacontainer{
	width: 87.5%;
	margin-left: auto;
	margin-right: auto;
}

.projectName{
	font-family: owners-black;
	font-size: 12vw;
	color: #000;
	margin-bottom: 5%;
	padding-top: 30%;

	text-align: left;
	width: 87.5%;
	margin-left: auto;
	margin-right: auto;
}

.projectpageimagealgoma{
	background-image: url(../images/mobileapplications.jpg);
	width: 87.5%;
	padding-top: 119.135714285714286%;
	margin-left: auto;
	margin-right: auto;
	background-size: contain;
	margin-bottom: 15%;
	background-repeat: no-repeat;
}

.algomaprojectoverview{
	font-size: 4.5vw;
	margin-bottom: 5%;
}

.goal1container{
	margin-bottom: 20%;
}

.goal2container{
	margin-bottom: 20%;
}

.goal3container{
	margin-bottom: 20%;
}

.projectoverview{
	margin-bottom: 50%;
	margin-top: 5%;
}

.retiredlogo{
	width: 100%;
	padding-top: 101.732142857142857%;
	background-image: url(../images/retiredlogowhite.jpg);
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50%;
}

.logoSurvey{
	margin-bottom: 8%;
}

.maincompetitors{
	width: 100%;
	padding-top: 65.086142322097378%;
	background-image: url(../images/maincompetitors.jpg);
	background-size: contain;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;

	margin-bottom: 5%;
}

.keytakeaways{
	background-color: #EAEAEA;
	border-radius: 10px;
	padding: 5%;
	margin-bottom: 10%;
}

.keytakeaways2{
	background-color: #EAEAEA;
	border-radius: 10px;
	padding: 5%;
	margin-bottom: 50%;
}

.keytakeawaysheading{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 3.5vw;
	letter-spacing: 1px;
	margin-bottom: 7%;
}

.takeaways li{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;

	font-size: 3.75vw;
	line-height: 5vw;
	color: #000000;
}
.takeaways li:nth-of-type(1){
	margin-bottom: 6%;
}

.logodistinction{
	width: 100%;
	padding-top: 22.870786516853933%;
	background-image: url(../images/logodistinction.jpg);
	background-size: contain;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;

	margin-bottom: 2%;
}

.goals{
	text-align: center;
	margin-bottom: 70%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.goals h1{
	margin-bottom: 12%;
}

.goals h2{
	margin-bottom: 5%;
}

.goals p{
	margin-bottom: 12%;
}


.goalnumber{
	font-size: 4.75vw;
	margin-bottom: 5%;
}

.goalintro{
	margin-bottom: 20%;
}

.logosketches{
	width: 100%;
	padding-top: 63.108614232209738%;
	background-size: contain;
	background-image: url(../images/logosketches.jpg);
	margin-bottom: 10%;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;
}

.symbolism{
	margin-top: 30%;
}

.logosymbolism{
	width: 100%;
	padding-top: 143.4%;
	background-image: url(../images/mobilesymbolism.jpg);
	background-size: contain;
	margin-bottom: 30%;
}

.primarylogoexplanation{
	margin-top: 6%;
	margin-bottom: 30%;
}

.logoevolution{
	width: 100%;
	padding-top: 153.596428571428571%;
	background-image: url(../images/mobilelogoevolution.jpg);
	background-size: contain;
	margin-top: 8%;
	margin-bottom: 30%;
}

#logoVideo{
	margin-bottom: 2%;
}

.caption{
	font-family: "aktiv-grotesk-regular", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 3vw;
	margin-bottom: 5%;
}

.goal2container{
	margin-top: 70%;
}

.colorpalette{
	width: 100%;
	padding-top: 45.692883895131086%;
	background-image: url(../images/colorpalette.jpg);
	background-size: contain;
	margin-bottom: 4%;
	background-repeat: no-repeat;
}

.colorpaletteexplanation{
	margin-bottom: 20%;
}

.typography{
	width: 100%;
	padding-top: 60.153558052434457%;
	background-image: url(../images/typography.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	margin-bottom: 20%;
}

.colorcontrast{
	width: 100%;
	padding-top: 56.814606741573034%;
	background-image: url(../images/colorcontrastcombinations.jpg);
	background-size: contain;
	margin-bottom: 70%;
}

.collectioncolors{
	width: 100%;
	padding-top: 63.561797752808989%;
	background-image: url(../images/collectioncolorcode.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.mobileinsta{
	width: 100%;
	padding-top: 125.246875%;
	background-image: url(../images/mobileinstaprofile.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.mobilefb{
	width: 100%;
	padding-top: 125.246875%;
	background-image: url(../images/mobilefbprofile.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.socialmedia{
	width: 87.5%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
}

.posttemplates{
	width: 100%;
	padding-top: 245.4625%;
	background-image: url(../images/mobileposts.png);
	background-size: contain;
	margin-bottom: 10%;
}


/*start of slider//////////////////////////////////////*/


.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-color: #B9B9B9;
}

/* Creates responsive 800 x 530 aspect ratio */
.comparison-slider::before {
    content: "";
    display: block;
    padding-top: 66.25%;
    overflow: visible;
}

/* Both images fill the slider area */
.after-image,
.before-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

/* After image underneath */
.after-image{
    background-image: url("../images/beforeLogoPhoto.jpg");
    z-index: 1;
}

/* Before image clipping container */
.before-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    width: 40%;
    height: 100%;

    overflow: hidden;
    z-index: 2;
}

/* Before image */
.before-image {
    background-image: url("../images/afterLogoPhoto.jpg");
}

/* Vertical divider */
.slider-line {
    position: absolute;
    top: 0;
    left: 40%;

    width: 3px;
    height: 100%;

    background: black;
    z-index: 3;
    pointer-events: none;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 40%;

    width: 44px;
    height: 44px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: black;
    /*border: 2px solid #333;*/

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;
    pointer-events: none;

    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}


.slider-handle{
	background-image: url(../images/arrows.svg);
	width: ;
}


/* Invisible range input covering the slider */
.slider {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
}


/*slider two//////////////*/


.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
   border-color: #B9B9B9;
}

/* Creates responsive 800 x 530 aspect ratio */
.comparison-slider::before {
    content: "";
    display: block;
    padding-top: 66.25%;
    overflow: visible;
}

/* Both images fill the slider area */
.after-image2,
.before-image2 {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}


.after-image2{
    background-image: url("../images/beforecollection.jpg");
    z-index: 1;
}

/* Before image clipping container */
.before-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;
    z-index: 2;
}


.before-image2 {
	background-image: url("../images/aftercollection.jpg");
}

/*end of slider*/


	


#homeBolt{
	width: 40%;
	margin-top: -10%;
}

#homeBolt:hover .homeBolt-5{
	stroke: #28BDE6;
	stroke-width: 5px;
}

nav{
	position: fixed;
	top: 2.5%;
	left: 50%;
	margin-left: -41.388888888888889%;
	width: 82.777777777777778%;
	height: 5.5vh;
	background-color: #000;
	border-radius: 50px;
	border-style: solid;
	border-color: #fff;
	border-width: 1.25px;
	z-index: 3;
}

.navButtonsContainer{
	display: flex;
		position: relative;
}

nav ul li{
	flex: 1;
		display: flex;
		text-align: center;
		border-radius: 50px;
	transition: background-color 500ms;	
	margin-top: .5vh;
	margin-bottom: .5vh;
	margin-left: .5vh;
	margin-right: .5vh;
}

#workButton:hover{
	text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
	border-radius: 50px;
	transition: text-shadow 500ms;	
}

#aboutButton:hover{
	text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
	border-radius: 50px;
	transition: text-shadow 500ms;	
}

nav a{
	font-size: 1.75em;
	flex: 1;
		justify-content: center;
		color: #ffffff;
		text-decoration: none;
		position: relative;
		line-height: 4.5vh;
	font-family: owners-black;
}

	






.footer{
	width: 100%;
	padding-top: 55%;
	position: relative;
	background-color: #fff;
	margin-top: 20%;
}

#footerClouds{
	position: absolute;
	top: -28%;
	left: 0;
}

.footerContent{
	width: 100%;
	position: absolute;
	top: 30%;
	left: 0%;
}

.footerHeader{
	font-family: owners-black;
	font-size: 7.5vw;
	margin-bottom: 4%;
	text-align: center;
}

.email{
	font-family: owners-black;
	font-size: 5vw;
	margin-bottom: 15%;
	text-align: center;
}

.copywright{
	font-family: owners-bold;
	font-size: 4vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24%;
	display: flex;
	width: 36%;
	padding-left: 2%;
}

.copywrightSymbol{
	font-family: bold;
	padding-top: 2%;
	padding-right: 1%;
	color: #000;
}

.gmail{
	width: 20%;
	position: absolute;
	left: 50%;
	margin-left: -10%;
}

.mailShareButton{
	display: flex;
	}

	.mailShareButton:hover{
		color: #C153B1;
	}

	#envelope{
		width: 100%;
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
		animation: bobMail 1.7s infinite ease-in-out;
	}

	#envelope:hover .mail-2{
		fill: #C153B1;
		transition: fill 300ms;
	}

	@keyframes bobMail{
		0%{
			margin-top: 5%;
		}

		50%{
			margin-top: 14%;
		}

		100%{
			margin-top: 5%;
		}
	}

	.checkBack{
	display: none;
	}

	.comeBackBlurb{
		display: none;
	}




}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	/*.container{
		width:93.75%; 
	}*/
	/* 720 pixels at a 768 pixel screen width (iPads) */


	#homeBolt{
		width: 23%;
		margin-top: -5%;
	}

	#homeBolt:hover .homeBolt-5{
		stroke: #28BDE6;
		stroke-width: 5px;
	}

	nav{
		position: fixed;
		top: 2.5%;
		left: 50%;
		margin-left: -41.388888888888889%;
		width: 82.777777777777778%;
		height: 5.5vh;
		background-color: #000;
		border-radius: 50px;
		border-style: solid;
		border-color: #fff;
		border-width: 1.25px;
		z-index: 3;
	}

	.navButtonsContainer{
		display: flex;
 		position: relative;
	}

	nav ul li{
		flex: 1;
  		display: flex;
  		text-align: center;
  		border-radius: 50px;
		transition: background-color 500ms;	
		margin-top: .5vh;
		margin-bottom: .5vh;
		margin-left: .5vh;
		margin-right: .5vh;
	}

	#workButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	#aboutButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	nav a{
		font-size: 1.75em;
		flex: 1;
  		justify-content: center;
  		color: #ffffff;
  		text-decoration: none;
  		position: relative;
  		line-height: 4.5vh;
		font-family: owners-black;
	}


/*end of nav ////////////////////////////////////////////////////////*/



h1{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 4.25vw;
	margin-bottom: 3%;
}

h2{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.25vw;

	margin-bottom: 3%;
}

h3{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size: 2.2vw;
	margin-bottom: 1.5%;
}

p{
	font-size: 2vw;
	line-height: 2.75vw;
	
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #414141;
}

.goalnumber{
	font-size: 2vw;
}

.goalintro{
	margin-bottom: 10%;
}

.center{
	text-align: center;
}

.flexparent{
	display: flex;
}

.algomalandingpagecontainer{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 7%;
}

.algomacontainer{
	width: 67.708333333333333%;
	margin-left: auto;
	margin-right: auto;
}

.detailsContainer{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.25vw;

	display: flex;
	width: 100%;
	margin-bottom: 0%;
	justify-content: center;
	padding-bottom: 2%;
}

.detailsContainer p{
	padding-right: 3%;
	padding-left: 3%;
	margin-bottom: 2%;
}

.projectName{
	font-family: owners-black;
	font-size: 6vw;
	color: #000;
	width: 100%;
	text-align: center;
	padding-top: 12%;
}

.projectpageimagealgoma{
	background-image: url(../images/stationary.png);
	width: 100%;
	padding-top: 35.8%;
	background-size: contain;
}

.goal1container{
	margin-bottom: 20%;
}

.goal2container{
	margin-bottom: 20%;
}

.goal3container{
	margin-bottom: 20%;
}

.projectoverview{
	margin-bottom: 30%;
}

.retiredlogo{
	width: 57.303370786516854%;
	padding-top: 58.110486891385768%;
	background-image: url(../images/retiredlogowhite.jpg);
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25%;
}

.logoSurvey{
	margin-bottom: 3%;
}

.maincompetitors{
	width: 100%;
	padding-top: 65.086142322097378%;
	background-image: url(../images/maincompetitors.jpg);
	background-size: contain;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;

	margin-bottom: 2%;
}

.keytakeaways{
	background-color: #EAEAEA;
	border-radius: 10px;
	padding: 3%;
	margin-bottom: 8%;
}

.keytakeaways2{
	background-color: #EAEAEA;
	border-radius: 10px;
	padding: 3%;
	margin-bottom: 25%;
}

.keytakeawaysheading{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.5vw;
	letter-spacing: 1px;
	margin-bottom: 2%;
}

.takeaways li{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;

	font-size: 2vw;
	line-height: 2.75vw;
	color: #000000;
}
.takeaways li:nth-of-type(1){
	margin-bottom: 2%;
}

.logodistinction{
	width: 100%;
	padding-top: 22.870786516853933%;
	background-image: url(../images/logodistinction.jpg);
	background-size: contain;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;

	margin-bottom: 2%;
}

.logosketches{
	width: 100%;
	padding-top: 63.108614232209738%;
	background-size: contain;
	background-image: url(../images/logosketches.jpg);
	margin-bottom: 10%;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;
}

.goals{
	text-align: center;
	margin-bottom: 25%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.goals h1{
	margin-bottom: 7%;
}

.goals h2{
	font-size: 2.2vw;
}

.goals p{
margin-bottom: 7%;
}

.symbolism{
	margin-top: 15%;
}

.logosymbolism{
	width: 100%;
	padding-top: 35.882022471910112%;
	background-image: url(../images/symbolism.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.primarylogoexplanation{
	margin-top: 2%;
	margin-bottom: 12%;
}

.logoevolution{
	width: 100%;
	padding-top: 19.297752808988764%;
	background-image: url(../images/logoevolution.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.animatedlogoheading{
	margin-top: 15%;
}

#logoVideo{
	margin-bottom: 2%;
}

.caption{
	font-family: "aktiv-grotesk-regular", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 1.75vw;
	margin-bottom: 2%;
}

.colorpalette{
	width: 100%;
	padding-top: 45.692883895131086%;
	background-image: url(../images/colorpalette.jpg);
	background-size: contain;
	margin-bottom: 4%;
	background-repeat: no-repeat;
}

.colorpaletteexplanation{
	margin-bottom: 10%;
}

.typography{
	width: 100%;
	padding-top: 60.153558052434457%;
	background-image: url(../images/typography.jpg);
	background-size: contain;
	margin-bottom: 15%;
	background-repeat: no-repeat;
}

.colorcontrast{
	width: 100%;
	padding-top: 56.814606741573034%;
	background-image: url(../images/colorcontrastcombinations.jpg);
	background-size: contain;
}


.collectioncolors{
	width: 100%;
	padding-top: 63.561797752808989%;
	background-image: url(../images/collectioncolorcode.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.socialmediaprofiles{
	width: 100%;
	padding-top: 50.296875%;
	background-image: url(../images/tabletprofiles.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.socialmedia{
	width: 67.708333333333333%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
}

.posttemplates{
	width: 100%;
	padding-top: 50.296875%;
	background-image: url(../images/tablettemplates.png);
	background-size: contain;
	margin-bottom: 10%;
}


/*start of slider//////////////////////////////////////*/


.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-color: #B9B9B9;
}

/* Creates responsive 800 x 530 aspect ratio */
.comparison-slider::before {
    content: "";
    display: block;
    padding-top: 66.25%;
    overflow: visible;
}


/* Both images fill the slider area */
.after-image,
.before-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

/* After image underneath */
.after-image{
    background-image: url("../images/beforeLogoPhoto.jpg");
    z-index: 1;
}

/* Before image clipping container */
.before-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    width: 40%;
    height: 100%;

    overflow: hidden;
    z-index: 2;
}

/* Before image */
.before-image {
    background-image: url("../images/afterLogoPhoto.jpg");
}

/* Vertical divider */
.slider-line {
    position: absolute;
    top: 0;
    left: 40%;

    width: 3px;
    height: 100%;

    background: black;
    z-index: 3;
    pointer-events: none;
}


.slider-handle {
    position: absolute;
    top: 50%;
    left: 40%;

    width: 44px;
    height: 44px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: black;
    /*border: 2px solid #333;*/

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;
    pointer-events: none;

    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}


.slider-handle{
	background-image: url(../images/arrows.svg);
	width: ;
}


/* Invisible range input covering the slider */
.slider {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
}


/*slider two//////////////*/


.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
   border-color: #B9B9B9;
}

/* Creates responsive 800 x 530 aspect ratio */
.comparison-slider::before {
    content: "";
    display: block;
    padding-top: 66.25%;
    overflow: visible;
}


/* Both images fill the slider area */
.after-image2,
.before-image2 {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}


.after-image2{
    background-image: url("../images/beforecollection.jpg");
    z-index: 1;
}

/* Before image clipping container */
.before-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;
    z-index: 2;
}


.before-image2 {
	background-image: url("../images/aftercollection.jpg");
}

/*end of slider*/





















.footer{
	width: 100%;
	padding-top: 30%;
	position: relative;
	background-color: #fff;
	margin-top: 20%;
}

#footerClouds{
	position: absolute;
	top: -48%;
	left: 0;
}

.footerContent{
	width: 100%;
	position: absolute;
	top: 25%;
	left: 0%;

}

.footerHeader{
	font-family: owners-black;
	font-size: 5vw;
	margin-bottom: 4%;
	text-align: center;
}

.email{
	font-family: owners-black;
	font-size: 3vw;
	margin-bottom: 6%;
	text-align: center;
}

.copywright{
	font-family: owners-bold;
	font-size: 2vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 14%;
	display: flex;
	width: 16%;
}

.copywrightSymbol{
	font-family: bold;
	padding-top: 2%;
	padding-right: 1%;
	color: #000;
}

.gmail{
	width: 10%;
	position: absolute;
	left: 50%;
	margin-left: -5%;
}

.mailShareButton{
	display: flex;
	}

	.mailShareButton:hover{
		color: #C153B1;
	}

	#envelope{
		width: 100%;
		margin-top: 3%;
		margin-left: auto;
		margin-right: auto;
		animation: bobMail 1.7s infinite ease-in-out;
	}

	#envelope:hover .mail-2{
		fill: #C153B1;
		transition: fill 300ms;
	}

	@keyframes bobMail{
		0%{
			margin-top: 3%;
		}

		50%{
			margin-top: 12%;
		}

		100%{
			margin-top: 3%;
		}
	}

	.videoHolder{
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
	}

	#figmaVideo{
		width:100%;
		margin-bottom: 10%;
	}

	.inspirationText p{
		margin-bottom: 5%;
	}

	.behindScenesBlurb{
		text-align: center;
	}

.checkBack{
	width: 100%;
	font-family: owners-black;
	font-size: 4vw;
	color: #000;
	position: absolute;
	top: 25%;
	left: 52%;
	}

	.comeBackBlurb{
		position: absolute;
		top: 40%;
		left: 52%;
	}



}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){


h1{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 600;
	font-style: normal;

	font-size: 2.75vw;
	margin-bottom: 3%;
}

h2{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size: 1.5vw;
	margin-bottom: 3%;
}

h3{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 500;
	font-style: normal;

	font-size: 1.2vw;
	margin-bottom: 1.5%;
}


p{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;

	font-size: 1.2vw;
	line-height: 1.8vw;
	color: #414141;
}

.center{
	text-align: center;
}

.flexparent{
	display: flex;
}







.algomalandingpagecontainer{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5%;
}

.algomacontainer{
	width: 52.097560975609756%;
	margin-left: auto;
	margin-right: auto;
}

.detailsContainer{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;
	display: flex;
	width: 100%;
	justify-content: center;
	margin-bottom: 3%;
}

.detailsContainer p{
	font-size: 1.4vw;
	padding-right: 3%;
	padding-left: 3%;
}

.projectName{
	font-family: owners-black;
	font-size: 4vw;
	color: #000;
	width: 100%;
	text-align: center;
	padding-top: 8%;
	margin-bottom: 2%;
}

.projectpageimagealgoma{
	background-image: url(../images/stationary.png);
	width: 100%;
	padding-top: 35.8%;
	background-size: contain;
}







.goalnumber{
	font-size: 1.45vw;
}

.goalintro{
	margin-bottom: 8%;
}

.goal1container{
	margin-bottom: 20%;
}

.goal2container{
	margin-bottom: 20%;
}

.goal3container{
	margin-bottom: 20%;
}

.projectoverview{
	margin-bottom: 30%;
}

.retiredlogo{
	width: 57.303370786516854%;
	padding-top: 58.110486891385768%;
	background-image: url(../images/retiredlogowhite.jpg);
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25%;
}

.logoSurvey{
	margin-bottom: 3%;
}

.maincompetitors{
	width: 100%;
	padding-top: 65.086142322097378%;
	background-image: url(../images/maincompetitors.jpg);
	background-size: contain;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;

	margin-bottom: 2%;
}

.keytakeaways{
	background-color: #EAEAEA;
	border-radius: 10px;
	padding: 3%;
	margin-bottom: 8%;
}

.keytakeaways2{
	background-color: #EAEAEA;
	border-radius: 10px;
	padding: 3%;
	margin-bottom: 25%;
}

.keytakeawaysheading{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1vw;
	letter-spacing: 1px;
	margin-bottom: 2%;
}

.takeaways li{
	font-family: "aktiv-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;

	font-size: 1.2vw;
	line-height: 1.5vw;
	color: #000000;
}
.takeaways li:nth-of-type(1){
	margin-bottom: 2%;
}

.logodistinction{
	width: 100%;
	padding-top: 22.870786516853933%;
	background-image: url(../images/logodistinction.jpg);
	background-size: contain;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;

	margin-bottom: 2%;
}

.logosketches{
	width: 100%;
	padding-top: 63.108614232209738%;
	background-size: contain;
	background-image: url(../images/logosketches.jpg);
	margin-bottom: 10%;

	border-style: solid;
	border-color: #B9B9B9;
	border-width: 1px;
	border-radius: 10px;
}

.goals{
	text-align: center;
	margin-bottom: 25%;
	width: 77%;
	margin-left: auto;
	margin-right: auto;
}

.goals h1{
	margin-bottom: 7%;
}

.goals h2{
	font-size: 1.5vw;
}

.goals p{
margin-bottom: 7%;
}

.symbolism{
	margin-top: 15%;
}

.logosymbolism{
	width: 100%;
	padding-top: 35.882022471910112%;
	background-image: url(../images/symbolism.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.primarylogoexplanation{
	margin-top: 2%;
	margin-bottom: 12%;
}

.logoevolution{
	width: 100%;
	padding-top: 19.297752808988764%;
	background-image: url(../images/logoevolution.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.animatedlogoheading{
	margin-top: 15%;
}

#logoVideo{
	margin-bottom: 2%;
}

.caption{
	font-family: "aktiv-grotesk-regular", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 1vw;
	margin-bottom: 2%;
}

.colorpalette{
	width: 100%;
	padding-top: 45.692883895131086%;
	background-image: url(../images/colorpalette.jpg);
	background-size: contain;
	margin-bottom: 4%;
	background-repeat: no-repeat;
}

.colorpaletteexplanation{
	margin-bottom: 10%;
}

.typography{
	width: 100%;
	padding-top: 60.153558052434457%;
	background-image: url(../images/typography.jpg);
	background-size: contain;
	margin-bottom: 15%;
	background-repeat: no-repeat;
}

.colorcontrast{
	width: 100%;
	padding-top: 56.814606741573034%;
	background-image: url(../images/colorcontrastcombinations.jpg);
	background-size: contain;
}


.collectioncolors{
	width: 100%;
	padding-top: 63.561797752808989%;
	background-image: url(../images/collectioncolorcode.jpg);
	background-size: contain;
	margin-bottom: 10%;
}

.socialmediaprofiles{
	width: 100%;
	padding-top: 36.599024390243902%;
	background-image: url(../images/socialmediaprofiles.jpg);
	background-size: contain;
	margin-bottom: 10%;
}


.socialmedia{
	width: 52.097560975609756%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
}

.posttemplates{
	width: 100%;
	padding-top: 41.307291666666667%;
	background-image: url(../images/posttemplates.png);
	background-size: contain;
	margin-bottom: 10%;
}


/*start of slider//////////////////////////////////////*/


.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-color: #B9B9B9;
}

/* Creates responsive 800 x 530 aspect ratio */
.comparison-slider::before {
    content: "";
    display: block;
    padding-top: 66.25%;
    overflow: visible;
}


/* Both images fill the slider area */
.after-image,
.before-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

/* After image underneath */
.after-image{
    background-image: url("../images/beforeLogoPhoto.jpg");
    z-index: 1;
}

/* Before image clipping container */
.before-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    width: 40%;
    height: 100%;

    overflow: hidden;
    z-index: 2;
}

/* Before image */
.before-image {
    background-image: url("../images/afterLogoPhoto.jpg");
}

/* Vertical divider */
.slider-line {
    position: absolute;
    top: 0;
    left: 40%;

    width: 3px;
    height: 100%;

    background: black;
    z-index: 3;
    pointer-events: none;
}


.slider-handle {
    position: absolute;
    top: 50%;
    left: 40%;

    width: 44px;
    height: 44px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: black;
    /*border: 2px solid #333;*/

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;
    pointer-events: none;

    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}


.slider-handle{
	background-image: url(../images/arrows.svg);
	width: ;
}


/* Invisible range input covering the slider */
.slider {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
}


/*slider two//////////////*/


.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
   border-color: #B9B9B9;
}

/* Creates responsive 800 x 530 aspect ratio */
.comparison-slider::before {
    content: "";
    display: block;
    padding-top: 66.25%;
    overflow: visible;
}


/* Both images fill the slider area */
.after-image2,
.before-image2 {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}


.after-image2{
    background-image: url("../images/beforecollection.jpg");
    z-index: 1;
}

/* Before image clipping container */
.before-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;
    z-index: 2;
}


.before-image2 {
	background-image: url("../images/aftercollection.jpg");
}

/*end of slider*/



	#homeBolt{
		width: 33%;
		margin-top: -10%;
	}

	#homeBolt:hover .homeBolt-5{
		stroke: #28BDE6;
		stroke-width: 5px;
	}

	nav{
		position: fixed;
		top: 2.5%;
		left: 50%;
		margin-left: -20.729166666666667%;
		width: 41.458333333333333%;
		height: 5.5vh;
		background-color: #121212;
		border-radius: 50px;
		border-style: solid;
		border-color: #fff;
		border-width: 1.25px;
		z-index: 3;
	}

	.navButtonsContainer{
		display: flex;
 		position: relative;
	}

	nav ul li{
		flex: 1;
  	display: flex;
  	text-align: center;
  	border-radius: 50px;
		transition: background-color 500ms;	
		margin-top: .75vh;
		margin-bottom: .75vh;
		margin-left: .75vh;
		margin-right: .75vh;
	}

	#workButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	#aboutButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	nav a{
		font-size: 1.75em;
		flex: 1;
  		justify-content: center;
  		color: #ffffff;
  		text-decoration: none;
  		position: relative;
  		line-height: 4vh;
		font-family: owners-black;
	}

/*end of nav////////////////////////////////////////////*/




/*button stuff /////////////////////////////////////////////////*/


.visitSiteButton{
	width: 100%;
	font-family: owners-black;
	font-size: 2.5vw;
	color: #000;
	text-decoration: none;
}

.lineHolder{
	width: 10%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -5%;
	margin-bottom: 4%;
	text-align: center;
}

.lineHolder2{
	width: 20%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -10%;
	margin-bottom: 4%;
	text-align: center;
}

.line2{
	width: 0%;
	padding-top: 2%;
	background-image: linear-gradient(to right,#00BAFF, #D5FF21, #F036BE );
	transition: width 350ms;
/*	margin-left: -10%;*/
	margin-bottom: 4%;
	text-align: center;
}

.line{
	width: 0%;
	padding-top: 4%;
	background-image: linear-gradient(to right,#00BAFF, #D5FF21, #F036BE );
	transition: width 350ms;
}

.lineDraw{
	width: 100%;
	transition: width 200ms;
}


	
/*footer stuff////////////////////////////////////////////*/

.footer{
	width: 100%;
	padding-top: 30%;
	position: relative;
	background-color: #fff;
	margin-top: 15%;
}

#footerClouds{
	position: absolute;
	top: -48%;
	left: 0;
}

.footerContent{
	width: 100%;
	position: absolute;
	top: 23%;
	left: 0%;
}

.footerHeader{
	font-family: owners-black;
	font-size: 4.5vw;
	margin-bottom: 3%;
	text-align: center;
}

.email{
	font-family: owners-black;
	font-size: 2.5vw;
	margin-bottom: 7%;
	text-align: center;
}

.copywright{
	font-family: owners-bold;
	font-size: 2vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 14%;
	display: flex;
	width: 16%;
}

.copywrightSymbol{
	font-family: bold;
	font-size: 2vw;
	padding-top: 3%;
	padding-right: 1%;
	color: #000;
}

.gmail{
	width: 10%;
	position: absolute;
	left: 50%;
	margin-left: -5%;
}

.mailShareButton{
	display: flex;
	}

	.mailShareButton:hover{
		color: #C153B1;
	}

	#envelope{
		width: 100%;
		margin-top: 3%;
		margin-left: auto;
		margin-right: auto;
		animation: bobMail 1.7s infinite ease-in-out;
	}

	#envelope:hover .mail-2{
		fill: #C153B1;
		transition: fill 300ms;
	}

	@keyframes bobMail{
		0%{
			margin-top: 3%;
		}

		50%{
			margin-top: 12%;
		}

		100%{
			margin-top: 3%;
		}
	}


.checkBack{
	width: 100%;
	font-family: owners-black;
	font-size: 4vw;
	color: #000;
	position: absolute;
	top: 25%;
	left: 50%;
}

.comeBackBlurb{
	position: absolute;
	top: 40%;
	left: 50%;
}