html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/******Unicorn Hover*******/
.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}

#home img {
    width: 100px;
    margin: auto;
    padding-bottom: 4%;
}

nav {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
}

a {
    color: #152222;
}

a:not(#home) {
    text-decoration: none;
    text-align: center;
    margin: 3%;
}

p {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: #152222;
}

main h1,
main h2 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 4rem;
}

@media (min-width: 900px) {
    #home img {
        margin: 0;
    }

    .left {
        width: 50%;
        float: left;
    }

    .right {
        width: 50%;
        float: right;
        text-align: right;
    }

    main {
        clear: both;
        width: 90%;
        padding-left: 30%;
        padding-top: 20px;
    }

    #headlines h1,
    #headlines h2 {
        text-align: left;
        font-size: 5rem;
    }
}

#one a:hover {
    color: #ffa900;
}

#two a:hover {
    color: #9600ff;
}

#three a:hover {
    color: #39df12;
}

#four a:hover {
    color: #0f6bff;
}


.web h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    text-transform: capitalize;
    padding-bottom: 40px;
    border-bottom: 1px solid #d3d3d3;
}

#first h1 {
    border-bottom: 0px;
}

.web img {
    width: 100%;
    max-width: 900px;
    margin: auto;
}

.web-page {
    color: #152222;
    /*margin: 0px;
    padding-top: 2%;*/
}

.web section {
    padding-top: 40px;
    padding-bottom: 40px;
    width: 98%;
    max-width: 900px;
    border-bottom: 1px solid #d3d3d3;
    margin: auto;
}

#web-portfolio section p a {
    margin: 0;
}

.web h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: .7rem;
    text-align: left;
    font-weight: 600;
    color: #ffa900;
}

.web section p:not(.four p) {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    padding: 0;
}

.web {
    margin: auto;
}

@media (min-width: 900px) {
    .web {
        padding-left: 0;
    }

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

#first h1 {
    padding-bottom: 0;
}

#first p a {
    font-weight: 600;
    font-size: .7rem;
}

#first h2:not(#headlines h2) {
    text-align: center;
}

#first div {
    text-align: center;
}

@media (min-width: 900px) {
    #first div {
        display: inline-block;
        width: 33%;
        text-align: center;
    }

    #first .four {
        width: 49%;
    }

    #first .five {
        width: 100%;
    }

}

#first h3 {
    font-family: 'Cormorant Garamond', serif;
}

#first p {
    font-family: 'Open Sans', sans-serif;
}

#first img {
    margin-top: 2%;
}

#first p:last {
    text-align: left;
}

#first h2 {
    text-align: center;
}

.four,
.five {
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8rem;
}

.four p a:hover,
.five p a:hover {
    color: #ffa900;
}

#first img {
    border: 1px solid #d3d3d3;
}

nav {
    width: 90%;
}

body {
    padding-top: 1%;
}

footer {
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: .9rem;
    color: #d3d3d3;
}

footer p {
    display: inline-block;
    width: 25%;
}
/**************ABOUT PAGE************/
#butterfly {
    height: 100%;
    margin: 0;
    background-image: url("../img/background.jpg");
    min-width: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

#butterfly h1 {
    background-image: url("../img/space.jpg");
}

.text {
    background-clip: text;
        -webkit-background-clip: text;
    color: rgba(0,0,0,.2);
}

#butterfly p {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.2rem;
	width: 90%;
	margin: auto;
	max-width: 600px;
	color: #0f1426;
}

#butterfly img:not(#home img) {
	filter: drop-shadow(8px 8px 10px black);
		-webkit-filter: drop-shadow(4px 4px 5px black);
		-moz-filter: drop-shadow(4px 4px 5px black);
}

#butterfly #float {
	max-width: 50px;
	margin-left: 20%;
	padding-top: 100px;
	animation-name: float;
		-webkit-animation-name: float;
		-moz-animation-name: float;
	animation-duration: 5s;
		-webkit-animation-duration: 5s;
		-moz-animation-duration: 5s;
	animation-iteration-count: 1;
		-webkit-animation-iteration-count: 1;
		-moz-animation-iteration-count: 1;
}

#butterfly #me {
	animation-name: fadein;
		-webkit-animation-name: fadein;
		-moz-animation-name: fadein;
	animation-duration: 5s;
		-webkit-animation-duration: 5s;
		-moz-animation-duration: 5s;
	animation-iteration-count: 1;
		-webkit-animation-iteration-count: 1;
		-moz-animation-iteration-count: 1;
}

/*******************FADE IN*********************/

@keyframes fadein {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}

@-webkit-keyframes fadein {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}

@-moz-keyframes fadein {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}

/*******************FLOATING BUTTERFLY*******************/

@keyframes float {

  	0% {
		transform: translateX(-500%);
		opacity: 0;
	}

	50% {
		transform: translateY(-20px);
		transform: rotate(20deg);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}

}

@-webkit-keyframes float {

  	0% {
		transform: translateX(-500%);
		opacity: 0;
	}

	50% {
		transform: translateY(-20px);
		transform: rotate(20deg);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}

}

@-moz-keyframes float {

  	0% {
		transform: translateX(-500%);
		opacity: 0;
	}

	50% {
		transform: translateY(-20px);
		transform: rotate(20deg);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}

}

/************************START 603px and UP***********************/

@media (min-width: 603px) {

	#butterfly h1 {
		font-size: 5rem;
	}

}

/***********************END 603px and UP***********************/

#butterfly main {
    margin-top: 5%;
    padding-left: 0;
}

/***********DESIGN PORTFOLIO*************/
.design h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: .7rem;
    text-align: left;
    font-weight: 600;
    color: #9600ff;
    text-transform: uppercase;
    text-align: center;
}

.design section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    text-transform: capitalize;
    font-weight: 500;
    color: #152222;
    text-align: center;
}3

@media (min-width: 900px) {
    .design section h2,
    .design section h3 {
        text-align: left;
    }
}

.phone {
    margin: auto;
}

.phone img {
    display: inline;
    width: 49%;
}

.design img {
    padding-bottom: 1%;
}

#calculator,
#shark {
    float: left;
}

#ice-cream,
#money {
    float: right;
}

@media (min-width: 940px) {

    .third img {
        width: 33%;
        display: inline;
    }

    .half img {
        width: 49%;
    }
}

/*********STRATEGY PAGE***********/
.strategy section img {
    border: 1px solid #d3d3d3;
    margin-top: 10px;
}

.strategy h3 {
    color: #39df12;
}

embed {
    margin: auto;
    width: 100%;
    height: 800px;
    padding-top: 30px;
}

.one,
.two,
.three {
    vertical-align: top;
}

#strategy-example h2 {
    color: #39df12;
}

#strategy-example section a:hover {
    color: #39df12;
}

.strategy section h2 {
    font-weight: 500;
}

/* Ripple effect */
.ripplea {
  background-position: center;
  transition: color 0.8s;
}

.ripplea:hover {
  color: #f9cd75 radial-gradient(circle, transparent 1%, #f9cd75 1%) center/15000%;
}

.rippleb {
  background-position: center;
  transition: color 0.8s;
}
.rippleb:hover {
  color: #d8a4fc radial-gradient(circle, transparent 1%, #d8a4fc 1%) center/15000%;
}

.ripplec {
  background-position: center;
  transition: color 0.8s;
}
.ripplec:hover {
  color: #a8f995 radial-gradient(circle, transparent 1%, #a8f995 1%) center/15000%;
}

.rippled {
  background-position: center;
  transition: color 0.8s;
}
.rippled:hover {
  color: #639fff radial-gradient(circle, transparent 1%, #639fff 1%) center/15000%;
}

.arrow-right {
    display: inline-block;
    transition: transform .3s ease-out;
}

a:hover .arrow-right {
    transform: translate(5px, 0);
}

.arrow-left {
    display: inline-block;
    transition: transform .3s ease-out;
}

a:hover .arrow-left {
    transform: translate(-5px, 0);
}