@charset "utf-8";
body,ul,li,h2{
	margin:0px;
	padding:0px;
}

* { box-sizing: border-box; }

.top a{
    color: #EC8965;
   
}
.top a:hover{
	color:#FBF7F5;
}

/***********-------typography------*******/
#page{
	font-family: 'Lora', serif;
	sont-size:1em;
	
  }

h1,h2{
    font-family: 'Pinyon Script', cursive;
    font-weight: 500;
    color: #FBF7F5;
    margin: auto;
	text-align: center;
}

h1{ font-size: 5.5em;
	padding-top: 55px;
    padding-bottom: 30px;
}
	
#winter h2{
	font-size:3em;
	padding-top:60px;
	padding-bottom:80px;
	background-repeat: no-repeat;
    background-image: url(images/winter-header.png);
    background-position: center bottom;
	
}

#winter h3{
	text-align: center;
	font-size:2em;
	margin: 1.2em 50px;
	font-family:'Lora', serif;
	color:#FBF7F5;
}




p{
	font-size:1.2em;
	font-family:'Lora', serif;
	color:#FBF7F5;
	padding:0px 50px;
}

/***********---------header---------******/

header{
    height:700px;
    background-image: url(images/kelly-sikkema-hSPVuakrJqs-unsplash.jpg);
    background-position: left top;
    background-repeat: no-repeat;
}
.top{
	position: absolute;
    top:10px;
	right:10px;
	display:flex;	
}

.top li{
    list-style-type: none;	
	padding:5px;
	
}
header nav ul li{ 
   
    list-style-type: none;
    background-color: #404C59;
	width:200px;
	padding:12px 25px;
	font-size:1.1em;
	color:#FBF7F5;
	margin:10px auto;
	text-align: center;
}
#img{
	margin:-20px 10px
}
#img2{
	visibility: hidden;
    position:absolute;}
header a{
	color:#FBF7F5;
	text-decoration: none;
}
header a:hover{
	text-decoration: underline;
	opacity:0.8;
}
/***-------winter section------******/

#winter{
    background-color: #3E4C5A;
	padding-bottom: 70px;
	position:relative;
	
      	
	
}

#qoute{
	visibility:hidden;
    position:absolute;

	
}

#images{
    background-color: #262626;
	position:relative;
	height:700px;
	margin:30px 0px 20px 0px;
	
}

#topleft{
	width:42vw;
	height:310px;
	top:30px;
	left:10px;
	
	
}

#bottomleft{
	width:42vw;
	height:310px;
	bottom:30px;
	left:10px;

	
}

#topright{
	width:45vw;
	height:250px;
	top:30px;
	right:10px;

}

#bottomright{
	width:45vw;
	height:376px;
	bottom:30px;
	right:10px;
	
	
}

.Bimg{
    border: 7px solid #626262;
    border-radius: 6px;
	position:absolute;
	
}


/******----------instagram-------********/
#instagram h2{
	background-color: #BF6E50;
	font-size:3em;
	padding:20px;
	text-align: center;
}


.lookbook{
    height: auto;;
    background-image: url(images/instagram-background.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#short,#short1{
	height:auto;
}

.lookbook img{
    width: 78vw;
	height:auto;
    margin: 80px 11vw 0px;
    -webkit-box-shadow: 4px 2px 27px 4px #222A32;
    box-shadow: 4px 2px 27px 4px #222A32;
}

.lookbook h3{
	color:#FBF7F5;
	font-size:1.4em;
	padding:10px 0px;
	margin:0px auto;
	width:70vw;
}

#coat{
    background-image: url(images/Coat.png);
    background-repeat: no-repeat;
    background-position: right center;
}

#cardigan{
    background-image: url(images/cardigan.png);
    background-repeat: no-repeat;
    background-position:right center;
}

#boots{
    background-image: url(images/boots.png);
    background-repeat: no-repeat;
    background-position: right center;	
}
/*****------------Paris-------*******/
#paris h2{
	font-family:'Lora', serif;
	padding:150px 20px;
	font-weight:600;
	font-size:13vw;
	text-align: start;
	position:relative;	
	
}

#header{
	position:absolute;
	top:210px;
	left:35vw;
	

}

span{
	font-family:'Pinyon Script', cursive;
    font-weight: 500;
	
	
}



#paris{
    background-color: #3E4C5A;
    height: 1200px;
    background-image: url(images/effel.jpg);
    background-position: center center;
    background-repeat: no-repeat;
	position: relative;

   
}

#paris p{
	text-align: start;
	padding:30px 15px;
	font-size:1.9em;
	color:#FBF7F5;
}

#paris ul{
	padding:0px 40px;
}

#paris li{
    padding:30px 0px;
    list-style-type: circle;
	line-height: 1.5em;
	font-size:1.3em;
	color:#FBF7F5;
}
#paris img{visibility:hidden;}
#paris #signature{
	font-family:'Miss Fajardose', cursive;
	font-size:3em;
	font-weight:500;
	position:absolute;
	right:5vw;
	bottom:0px;
}

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

footer{
    
    background-image: url(images/footer.jpg);
    background-repeat: no-repeat;
    background-position: left top;
	padding:100px 40px;
	text-align: center;
	
}





#social{
	display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	width:60%;
	margin: auto;
	
	
	
}
#social li{
    
    list-style-type: none;
	padding:0px 5px;
}


#social a{
    color: #79A0C5;
   
}
#social a:hover{
	color:#F1F1F1;
}

footer ul{
	display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	margin:0px 0px 30px;
  }
footer li{
    list-style-type: none;
	padding:30px 5px 5px;
   
}
footer a{
	color:#79A0C5;
	text-decoration: none;
}

.container {
    padding: 16px;
}

#col{
    width:80%;
    padding: 10px;
    margin: 10px ;
    display: inline-block;
    border: none;
    background: #1972E7;
    border-radius: 8px;
    border: 1px solid #1972E7;
	
}
#col .fa-facebook, #col a{
    color:#ffffff;
}
.label{
    text-align: left;	
	
}
input[type=text], input[type=password] {
    width:80%;
    padding: 10px;
    margin: 10px ;
    display: inline-block;
    border: none;
    background: #f1f1f1;
    border-radius: 8px;
    border: 1px solid #F1F1F1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
   
}



#signup{
    background-color: #BE6F50;
    color: white;
    padding: 10px 18px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 40%%;
    opacity: 0.9;
    border-radius: 8px;
    border: 3px solid #A24D2E;
}

#signup:hover {
    opacity: 1;
}

#hide-md-lg{
    background-image: url(images/or.png);
    background-repeat: no-repeat;
    background-position: center center;
}





@media only screen and (min-width: 580px){
	
	/*******------header------******/
#page{
	display:block;
    background-image: url(images/tablet-header.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}
header{
	background-image:none;
	height:300px;
	position:relative;
}
header nav ul{
	display:flex;
	width:85%;
	margin:auto;
}
header nav ul li{
	background-color: #EC8965;
	order:1;
	width:150px;
	padding:12px 0px;
}
	
#img{
	visibility:hidden;
}
#img2{
	visibility: visible;
	position:absolute;
	left:0px;
	top:-200px;
	z-index: 100;
	width:22vw;
		
		
}
	
/*******-------WINTER-----*********/
#winter{
    background-color: #3E4C5A;
	padding-bottom:100px;
	position:relative;
	margin-left:5vw;
	height:1080px;
    -webkit-box-shadow: 8px -10px 0px 10px #3E4C5A;
    box-shadow: -8px 8px 0px 10px hsla(210,18%,30%,0.26);
      	
	
}
#winter h2{padding-top:40px}

#qoute{
	visibility:visible;
    margin: auto;
	padding-bottom: 30px;
	text-align: center;
	position:static;

	
}
	
#bq{
	background: none;
	padding: 0px;
	color:#FBF7F5;
	font-family: 'Pinyon Script', cursive;
	margin: auto;
	text-align: center;
	}
	
#float{
	margin-left:40vw;
	
}
#float h3{
	font-size:1.6em;
	margin-top:20px;
	}
	

#images{
   height: 0px;
	position:relative;
	margin:0px;
}

#topleft{
	width:40vw;
	height:310px;
	top:30px;
	left:3vw;
	
	
}

#bottomleft{
	visibility:hidden;
	position: absolute;

	
}

#topright{
	visibility: hidden;
	width:40vw;
	height:250px;
	top:484px;
    left:50vw;

}

#bottomright{
	width:40vw;
	height:376px;
	top:360px;
    left:3vw;
	
	
}

.Bimg{
    border: 7px solid #626262;
    border-radius: 6px;
	position:absolute;
}
	
/********-------instagram-----********/

#instagram{
    background-color: #3E4C5A;
    margin: 80px 8vw 80px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 120px 1fr 1fr 1fr 1fr;
     -webkit-box-shadow: 10px -25px 0px 10px #BF6E50;
    box-shadow:10px -25px 0px 10px hsla(16,46%,53%,0.36);
}
	
#instagram h2{
    background-color: #3E4C5A;
    font-size: 3.95em;
    grid-column: 1/3;
    background-image: url(images/h2instagram.jpg);
    background-repeat: no-repeat;
    background-position: center center;
	
	
}
	
.lookbook{
	background-image: none;
	margin:10px;	
}
	
.lookbook img{
	width:35vw;
	height:auto;
	margin:0px;	
}
	
#coat ,#cardigan ,#boots{
	background-image: none;
}
	
.lookbook h3{
	margin:20px 0px 0px;
	font-size:1.1em;
	width:35vw;
}
#coatgrid{
	grid-column:1/2;
	grid-row:2/4;
}
	
#cardigangrid{
	grid-column:2/3;
	grid-row:2/4;
}
	
#bootgrid{
	grid-column:2/3;
	grid-row:4/6;
}

#short{
	grid-column:1/2;
	grid-row:4/5;
	height:50%;
}
	
#short1{
	grid-column:1/2;
	grid-row:5/6;
	height:50%;
		
}
	
#Earring,#scarf{
	margin-top:10px;
}	
	
/********---------paris-----*********/

#header{
	top:125px;
	left:37vw;
	font-size:10vw;
}
	
#paris{
	background-image:none;
	background-color:#BF6E50;
	margin-left:8vw;
	padding-left:10vw;
	height:950px;
	-webkit-box-shadow:-10px -25px 0px 10px #3E4C5A;
    box-shadow: -10px -25px 0px 10px hsla(210,18%,30%,0.95);
}
	
#paris h2{
	padding:50px 20px;
}
	
#paris ul{
	padding-left:30vw;
}
	
#paris ul li{
	padding:20px 0px;
}
	
#paris img{
	visibility:visible;
	position:absolute;
	left:-8vw;
	top:390px;
	width:40vw;
	height:auto;
}
	
#paris #signature{
	left:-4vw;
	bottom:90px;
	padding:0px;
}
	
/******--------footer------****/
footer{
	margin-top:50px;
	padding-top:10px;
	background-image:none;
	background-color:#3E4C5A; 
	display:flex;
		
}
#bq{display:block;}

	
.container{
	order:2;
	flex-basis: 60%;
		
}
footer ul{
	display:block;
		
}
	
footer ul li{
	text-align: left;
}
#flex{
   	flex-basis: 40%;
}
#social{
	margin:0px;
}
}









@media only screen and (min-width: 750px){
	
#page{
      background-image: url(images/desktop-background.jpg);
      background-repeat: no-repeat;
      background-position: left top;
}
/*****-----winter-----*******/
 #topright{
      visibility:visible;
      width:360px;
      height:250px;
      top:484px;
      left:350px;

}

 #topleft{
      width:285px;
      height:310px;
      top:30px;
      left:3vw;


}

#bottomleft{
      visibility:visible;
      position: absolute;
	  width:140px;
	  height:200px;
	  top:240px;
	  left:25vw;
	  z-index: 100;


}

 
#bottomright{
      width:285px;
      height:376px;
      top:360px;
      left:3vw;


}
	
/*********------istagram------*******/
#instagram{
        background-color: #3E4C5A;
        margin: 80px 70px 80px 0px;
	 
	    display:flex;
	    flex-wrap:wrap;
		justify-content: center;
  
}
.lookbook img{
		width:200px;
		height: auto;
		
}
.lookbook h3{
		margin:20px 0px;
		width:200px;
}
	
#short img ,#short1 img{
		margin:0px 20px;
		width:250px;
}
#short h3,#short1 h3{
		width:250px;
}
#instagram h2{
		width:70vw;
}
	
/*****-------paris-----******/
#paris img{
		left:-6vw;
		width:300px;
		height:500px;
}
#paris #signature{
		left:2vw;
		bottom:20px;
}	
}





@media only screen and (min-width: 900px){
#page{
        width: 900px;
        margin: auto;
        border: 2px solid #1F252A;
}
body{
        background-color: #1B242D;
        background-repeat: no-repeat;
        background-position: center center;
}
#winter{
		margin:0px 0px 0px 56px;
}
#topright{
        width:384px;
        left:430px;

}

 #bottomleft{
  	    left:250px;
}
#float{
		margin-left:400px;
}
	
#img2{
		width:215px;
}
	
	
	
/*****-------paris-----******/
#paris img{
		left:-50px;
		width:380px;
}
#paris h2{
		font-size:7em;
}	
#header{
        left: 325px;
        font-size:80px;
}
#paris{
		padding-left:50px;
}
#paris ul{
		padding-left:360px;
}
}