@charset "UTF-8";
/* CSS Document */

/*---- Default Styling-----*/

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

html {
	scroll-behavior: smooth;
}

body {
  font-family: arial, sans-serif;
  font-size: 1vw;
  background: white;
}


#wrapper {
	width: 100%;
	margin: 0 auto;
	max-width: 1020px;
	background-color: white;
}

a, a:visited {
    color: inherit;
}


/*---- Header ----*/

header {
  position: fixed;
  padding: 1.5em;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}


.style-logo {
	width: auto;
	height: auto;
	padding: auto;
	margin: auto;
position: relative;
		float: left;
	z-index: 10;
}

.style-shop {
	width: 30%;
	text-align: center;
	height: auto;
	padding: auto;
	margin: 10%;
position: relative;
		float: center;
	z-index: 10;

}
.style-camera {
	width: 20%;
	height: auto;
	padding: auto;
	margin: auto;
position: relative;
		float: center;
	z-index: 10;

}

.site-nav {
  position: relative;
  float: right;
  z-index: 400;
  top: 0;
  left: 0;
	
  display: block !important;
  width: 80%;
  padding: .75em 1em 0 0;
  opacity: .95;
  background: none;
	
}

.site-nav ul {
  list-style-type: none;
  margin: 0;
  text-align: right;
}

.site-nav ul li {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 1.5em;
}

.site-nav ul li a {
  font-size: .85rem;
  padding-bottom: .5em;
  text-decoration: none;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #33D9FF;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.site-nav ul li a:hover {
  outline: none;
  border-bottom: 1px solid #33D9FF;
}

/*---- Main Hero ----*/

.hero {
  position: relative;
  height: 54vw;
  background-color: #17f8d6;
}

.hero-works {
  position: relative;
  height: 20vw;
  background-color: #17f8d6;
}

.hero-content {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  color: #ED90C5;
  position: absolute;
  z-index: 200;
  padding-top: 15em;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.hero-works-content {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  color: #fff;
  position: absolute;
  z-index: 200;
  padding-top: 20em;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
}


.band {
	position: absolute;
	
    bottom: 0px;
	width: 768px;
}


/*-- Reusable Classes --*/

h2 {
	font-weight: 100;
	font-size: 3em;
    line-height: 2.2;
	margin-bottom: .35em;
	padding-top: 5%;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}

h1 {
  margin-bottom: 1.5%;
  text-transform: uppercase;
  text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
  letter-spacing: .85em;
  margin-left: .7em;
  font-size: 3.5vw;
}

h3 {
  font-size: 2em;
  font-weight: 100;
  line-height: 2.75;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}

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

p {
	font-size: 1.5em;
	line-height: 1.8;
}

figure {
	margin: 0;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

a, input, textarea {
	transition: all 0.15s ease-in-out;
}

input[type="submit"]:hover {
	corsor: pointer;
}

.container {
	max-width: 1080px;
	margin:  auto;
}





/*---- Intoro ----*/

.intro {
  position: relative;
  color: #343144;
  background: #fff;
  padding: 12.5em 6em 14.5em;
}
.gold_tiara {
	text-align: center;
}

.intro-text {
  position: relative;
}

.intro p {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-size: 2.5em;
  line-height: 1.8;
  position: relative;
  z-index: 200;
  text-align: center;
  letter-spacing: .325em;
  text-transform: uppercase;
}

/*---- Main works ----*/
.main-works {
	background-color: #FFFFFF;
}

.main-works-item:last-child {
	margin-bottom: 0;
}

.main-works-item-img img {
	border-radius: 5px;
}



.main-works-item-img.primary img {
	box-shadow: 
		1px 1px 10px rgba(0, 0, 0, 15%),
		10px 10px 0 #53687E;
}

.main-works-item-img.secondary img {
	box-shadow: 
		1px 1px 10px rgba(0, 0, 0, 15%),
		10px 10px 0 #6B4E71;
}

.flower_up {
	padding-top: 35em;
}

.flower_down {
	padding-bottom: 10em;
	float: right;
	
}

/*---- Main about ----*/

.main-about {
	background-color: #FFFFFF;
}


.main-about-addition-skills ul {
	padding-left: 20px;
	list-style: disc;
}

.main-about-addition-follow a {
	color: #C2B2B4;
}

.margin-about-description {
	margin-right: 50px;
	margin-bottom: 0;
}


.social-links {
	display: flex;
	flex-wrap: wrap;
	font-size: 2rem;
}

.social-links li+li {
	margin-left: 1em;
}



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

footer {
  width: 100%;
  z-index: 980;
  margin-top: -3.5em;
  padding-top: 10em;
  background-image:-moz-linear-gradient( -45deg, rgba(121,239,208,0.97) 0%, rgb(134,235,210,1.00) 100%);
  background-image: -webkit-linear-gradient( -45deg, rgb(121,239,208,0.97) 0%, rgb(134,235,210,1.00) 100%);
  background-image: -ms-linear-gradient( -45deg, rgb(121,239,208,0.97) 0%, rgba(134,235,210,1.00) 100%);
}

.footer-info {
  clear: both;
  padding-top: 5em;
}

.footer-info p {
  font-size: 0.8rem;
  color:#fff;
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: 1.7em;
}

.footer-credit {
  float: right;
  width: 40%;
  text-align: right;
  position: relative;
}

.footer-legal {
  opacity: .8;
}

.footer-social {
  display: block;
  width: 100%;
  list-style-type: none;
  text-align: center;
	padding-left: 3rem;
}

.footer-social li {
  display: inline-block;
  margin: 0 1.2em;
	font-size: 1rem;
  color:#fff;
}

.footer-social li a:hover {
  color: #fff;
 background: #17f8d6;
}

.footer-social li a .social-hover {
  display: none;
}

.footer-social li a:hover .social-default {
  display: none;
}
.footer-social li a:hover .social-hover {
  display: inline;
}

/**-- Desctop View --**/

@media (min-width: 1024px){
	
	
.style-logo {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 0px;
	padding-bottom: 30px;
}
	.style-logo  {
		float: left;
	}
	
	.style-nav  {
		float: right;
	}
	
	h2 {
	font-weight: 100;
	font-size: 1em;
    line-height: 2.2;
	margin-bottom: -.35em;
	padding-top: 13%;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}
h1 {
  margin-bottom: 1.5%;
  text-transform: uppercase;
  text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
  letter-spacing: .75em;
  margin-left: .7em;
  font-size: 3.5vw;
}
h3 {
  font-size: 1em;
  font-weight: 100;
  line-height: 2.75;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}

.band {
    bottom: 0px;
	width: 100%;
}

	.main-works {
		padding: 120px 0;
	}
	
	.main-works-item {
		margin: 0 -60px 100px 
	}
	
	.main-works-item-text,
	.main-works-item-img {
		padding: 0 -60px;
	}
	
	.main-works-item-img.primary img {
		box-shadow: 
			1px 1px 10px rgba(0, 0, 0, 15%),
			30px 30px 0 #53687E;
	}
	
	.main-works-item-img.secondary img {
		box-shadow: 
			1px 1px 10px rgba(0, 0, 0, 15%),
			30px 30px 0 #6B4E71;
	}
	
	.main-about-addition-skilles {
		display: flex;
	}
	
	.main-about-addition-skilles ul {
		margin-bottom: 0;
	}
	
	.main-about-addition-skilles ul+ul {
		margin-left: 30px;
	}

}


/**-- Tablet View --**/

@media (min-width: 768px){
	
	.style-logo {
	width: 768;
	height: auto;
	}
	
	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {
		text-align: center;
	}
	
	.band {
    bottom: 0px;
	width: 100%;
}

	
	.main-works {
		padding: 100px;
	}
	
	.main-works-item {
		display: flex;
		align-items: center;
		margin: 0 -30px 50px;
	}
	
	.main-works-item:nth-child(2) {
		flex-direction: row-reverse;
	}
	
	.main-works-item-text,
	.main-works-item-img {
		width: 50%;
		padding: 0 30px;
	}
	
	.main-about {
		padding: 100px 0;
	}
	
	.main-about-img .mobile {
		display: none;
	}

	.main-about-img .tablet-and-up {
		display: block;
		width: 100%;
		margin-bottom: 60px;
	}
	
	.main-about-container {
		display: flex;
	}
	
	.main-about-description,
	.main-about-addition {
		width: 50%;
	}
	
	
	
	
	
	
}