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


* {
	margin:0;
	padding: 0;
}







.small {
	display: none;
}

.big {
	display: none;
}

.iphone {
	display: block;
}



	
/* navigation IPHONE*/	
/* The Overlay (background) */
.overlayip {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

/* Position the content inside the overlay */
.overlay-contentip {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

/* The navigation links inside the overlay */
.overlayip a {
    padding: 8px;
    text-decoration: none;
    font-size: 30px;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.overlayip a:hover, .overlayip a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlayip .closebtnip {
     position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
	
	.buttonip {
		padding: 25px;
		padding-left: 50px;
		position: fixed;
		top: 0;
		width: 100%;
		background-color: white;
		
		
	}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlayip {overflow-y: auto;}
  .overlayip a {font-size: 20px}
  .overlayip .closebtnip {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
		











/* top banner */	


	
section#titleiphone {
	height: 100%;
	margin-top: 70px;
	padding-top: 100px;
	/*padding-bottom: 180px;*/	
	/* background: url('../images/selfpromo3.jpg') no-repeat center center;*/	
	background-size: cover;
	
}

section#titleiphone h2{ 
text-align: left;
padding-bottom: 50px;
padding-left: 40px;
	color: black;
	font-size: 22px;
	padding-top: 15px;
	line-height: 36px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
	letter-spacing: .5px;
	padding-right: 30px;


}
	
section#titleiphone h1{
text-align: left;
padding-left: 40px;
	color: #0e69d9;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
}
	
	
/* iphone top learn more button! */	
	
.btnntitle {

    border: 1.7px solid #111111;
    background-color: none;
    padding: 14px 28px;
    cursor: pointer;
	text-decoration: none;
	font-size: 11px;
}

.topiphone {
	margin-left: 40px;
    border-color: #111111;
    color: black;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.topiphone:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}

	





	
	
/* design section */
	
	
.img__wrapip {
  position:sticky;

	display: inline-block;

	margin-bottom: 20px;
}	

.img__descriptionip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.85);
  color: black;
  visibility: hidden;
  opacity: 0;
	text-align: center;
	text-decoration: none;
  padding-top: 130px;


  /* transition effect. not necessary */
  transition: opacity .7s, visibility .7s;
}
		
.img__descriptionip h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 17px;
	letter-spacing: 1.5px;

	}
		
.img__descriptionip h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 13px;
	line-height: 18px;
	color: #0B57C0;
	letter-spacing: 1px;
		
	}
	
.img__wrapip img {
		max-width: 100%;
	}
			

.img__wrapip:hover .img__descriptionip {
  visibility: visible;
  opacity: 1;
  text-align: center;
  text-decoration: none;
  padding-top: 130px;


	
}
	
.img__wrapip:hover .img__descriptionip h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	 line-height: 17px;
		letter-spacing: 1.5px;

	}
			

section#designip{
	text-align: center;
		margin-top: 100px;
	margin-bottom: 100px;
}	

section#designip img{

	max-width: 80%;

}





/* art IPHONE section */

	
	

section#artip{
	background-color: #111111;
	padding-top: 130px;
	padding-bottom: 160px;

	padding-left: 35px;

	
	}
		
section#artip h3{
	text-align: left;
	color: white;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;
	padding-left: 9px;

		
	}
	
section#artip h2{
	text-align: left;
	color: white;
	padding-bottom: 5px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 27px;	
	line-height: 70px;
	padding-left: 9px;
	
		
	}
	
section#artip p{
	text-align: left;
	color: #98a3ae;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 35px;
  	font-size: 17px;
	letter-spacing: .5px;
	padding-left: 9px;
	padding-right: 30px;

	}
		
section#artip h4{
	padding-top: 50px;
	text-align: left;
	padding-left: 9px;
	}
	
	
	
	
	
/* art IPHONE button */	
	
.btn {

    border: 1.7px solid black;
    background-color: #111111;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
	text-decoration: none;
}

.artip {
	
    border-color: white;
    color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.artip:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}







/* about IPHONE section */	

	
section#aboutmeimage {
	
	height: 100%;
	background-color: #ebebeb;
	padding-top: 480px;
	background: url('../images/self-new.png') no-repeat center center;
	background-size: cover;

	
}

section#aboutmeip{
	padding-bottom: 30px;

	
	}
		
section#aboutmeip h3{
	text-align: left;
	color: black;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;
	padding-left: 47px;
	padding-top: 60px;

		
	}
	
section#aboutmeip h2{
	text-align: left;
	color: black;
	padding-bottom: 5px;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 27px;	
	line-height: 70px;
	padding-left: 45px;
	
		
	}
	
section#aboutmeip p{
	
	text-align: left;
	color: #grey;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 35px;
  	font-size: 17px;
	letter-spacing: .5px;
	padding-left: 47px;
	padding-right: 30px;

	}
		
section#aboutmeip h4{
	padding-top: 50px;
	text-align: left;
	padding-left: 47px;
	}
	
	
	
	
	
/* about SMALL button */	
	
.btnabout {

    border: 1.7px solid black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
	text-decoration: none;
}

.aboutip {
	
    border-color: black;
    color: black;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.aboutip:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	

/* brands IPHONE section */		
	
.brands {
	
	text-align: center;
	letter-spacing: 1px;
	padding-bottom: 80px;
	padding-top: 70px;
	
}
	
.brands img {
		max-width: 100%;
		padding-top: 15px;
	}
	
.brands h5 {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	}

hr {
	opacity: .4;
}






/* contact IPHONE section */




section#contactip{
	background-color: white;
	padding-top: 120px;
	padding-bottom: 150px;



	
	}
		
section#contactip h3{
	text-align: left;
	color: black;
	padding-left: 48px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;

		
	}
	
section#contactip h2{
	text-align: left;
	color: black;
	padding-bottom: 10px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 27px;	
	line-height: 70px;
	padding-left: 48px;
	
		
	}
	
section#contactip p{
	text-align: left;
	color: #grey;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 35px;
  	font-size: 17px;
	letter-spacing: .5px;
	padding-left: 48px;
	padding-right: 20px;
	padding-bottom: 25px;
	}
		
section#contactip h4{
	padding-top: 35px;
	text-align: left;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    font-weight: medium;
	color: #0e69d9;
		font-size: 12px;
	}
	

	
	
	
	
	
/* get in touch SMALL button*/	

buttonip {
    border: 1.7px solid #111111;
    background-color: none;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    font-weight: bold;
	color: black;
    cursor: pointer;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 11px;

	}	
	
	buttonip:hover {
	Background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;}
	
	.tooltipip {
    position: relative;
    display: inline-block;
	border: none;
    outline: none;
    background: none;
    font-weight: 300;
    cursor: pointer;
    color: inherit;
	margin-left: 48px;

}

.tooltipip .tooltiptextip {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

.hideip {
       opacity: 0;
	   margin: -20px;
    }
	
.tooltipip .tooltiptextip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
	






	
/* footer IPHONE column*/
	

* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.footercolumnip {
    padding: 10px;
	text-align: left;
	padding-left: 50px;
}

/* Clear floats after the columns */
.rowip:after {
    content: "";
    display: table;
    clear: both;
}
	
	
section#bottomnavip h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 1px;
	padding-bottom: 5px;
		
	}
	
section#bottomnavip p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 12px;
	
}
	
section#bottomnavip {
	background-color: #ebebeb;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 40px;
	
}
	
section#bottomnavip a{
	text-decoration: none;
	color: black;
	}
	
section#bottomnavip a:hover{
	color: #0e69d9;
	font-weight: normal;

	
	}
	
section#socialip a{
	padding-right: 5px;
	}

	
	
section#footer {
	text-align: center;
	color: #98a3ae;	
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #111111;
	}
		
section#footer p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: .5px;
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;

}

		
	








	

	
	














@media (min-width: 605px)
{

.big {
	display: none;
}

.small {
	display: block;
}

.iphone {
	display: none;
}

	
	
	
	
/* navigation SMALL*/	
	
	
/* The Overlay (background) */
.overlaysm {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

/* Position the content inside the overlay */
.overlay-contentsm {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

/* The navigation links inside the overlay */
.overlaysm a {
    padding: 8px;
    text-decoration: none;
    font-size: 30px;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.overlaysm a:hover, .overlaysm a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlaysm .closebtnsm {
     position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
	
	.buttonsm {
		padding: 25px;
		padding-left: 50px;
		position: fixed;
		top: 0;
		width: 100%;
		background-color: white;
		
		
	}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlaysm {overflow-y: auto;}
  .overlaysm a {font-size: 20px}
  .overlaysm .closebtnsm {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
		

	
	

	
	
	
	
	
	
	
	
	
	
	
	
	

	
	
/* top banner */	
	
section#titlesm {
	height: 100%;
	background-color: white;
	/*margin-top: 70px; */
	padding-top: 190px;
	/*padding-bottom: 180px;*/
	/*background: url('../images/selfpromo2.jpg') no-repeat center center; */
	background-size: cover;

	
}

section#titlesm h2{ 
text-align: center;
padding-bottom: 50px;

	color: black;
	font-size: 30px;
	padding-top: 15px;
	line-height: 40px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
	letter-spacing: 1px;


}
	
section#titlesm h1{
text-align: center;

	color: #0e69d9;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
}
	
	
	
	
	
/* small top learn more button! */	
	
	
	
	
	
.btnntitle {

    border: 1.7px solid #111111;
    background-color: none;
    padding: 14px 28px;
    cursor: pointer;
	text-decoration: none;
	font-size: 11px;
	 display: block;
 	max-width: 148px;
  	margin: auto;

}

.topsmall {
    border-color: #111111;
    color: black;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.topsmall:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	
	

	
	

	
/* design SMALL section */
	
	
.img__wrap {
  position:sticky;
  height: 400px;
  width: 400px;
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 20px;
}	

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.85);
  color: black;
  visibility: hidden;
  opacity: 0;
	text-align: center;
	text-decoration: none;
  padding-top: 150px;


  /* transition effect. not necessary */
  transition: opacity .7s, visibility .7s;
}
		
.img__description h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 17px;
	letter-spacing: 1.5px;

	}
		
.img__description h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 13px;
	line-height: 18px;
	color: #0B57C0;
	letter-spacing: 1px;
		
	}
	
.img__wrap img {
		max-width: 100%;
	}
			

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
  text-align: center;
  text-decoration: none;
  padding-top: 150px;


	
}
	
.img__wrap:hover .img__description h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	 line-height: 17px;
		letter-spacing: 1.5px;

	}
			

section#designsm{
	text-align: center;
		margin-top: 100px;
	margin-bottom: 100px;
}	

section#designsm img{

	max-width: 100%}
	
	
	









	
	
	
/* art SMALL section */

	
	

section#artsm{
	background-color: #111111;
	padding-top: 130px;
	padding-bottom: 160px;
	margin-bottom: 150px;
	padding-left: 35px;

	
	}
		
section#artsm h3{
	text-align: left;
	color: white;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;
	padding-left: 37px;

		
	}
	
section#artsm h2{
	text-align: left;
	color: white;
	padding-bottom: 5px;
	letter-spacing: 3px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 36px;	
	line-height: 80px;
	padding-left: 35px;
	
		
	}
	
section#artsm p{
	text-align: left;
	color: #98a3ae;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 35px;
  	font-size: 17px;
	letter-spacing: .5px;
	padding-left: 35px;
	padding-right: 50px;

	}
		
section#artsm h4{
	padding-top: 50px;
	text-align: left;
	padding-left: 35px;
	}
	
	
	
	
	
/* art SMALL button */	
	
.btn {

    border: 1.7px solid black;
    background-color: #111111;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
	text-decoration: none;
}

.artsm {
	
    border-color: white;
    color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.artsm:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	
	
	

	
	
	
	
	
	
	
/* about SMALL section */	

	
section#aboutmeimage {
	
	height: 100%;
	background-color: #ebebeb;
	padding-top: 480px;
	background: url('../images/self-new.png') no-repeat center center;
	background-size: cover;
	margin-right: 25px;
	
}

section#aboutmesm{
	padding-bottom: 30px;
		padding-left: 35px;



	
	}
		
section#aboutmesm h3{
	text-align: left;
	color: black;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;
	padding-left: 35px;
	padding-top: 60px;

		
	}
	
section#aboutmesm h2{
	text-align: left;
	color: black;
	padding-bottom: 5px;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 36px;	
	line-height: 80px;
	padding-left: 35px;
	
		
	}
	
section#aboutmesm p{
	
	text-align: left;
	color: #grey;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 35px;
  	font-size: 17px;
	letter-spacing: .5px;
	padding-left: 35px;
	padding-right: 50px;

	}
		
section#aboutmesm h4{
	padding-top: 50px;
	text-align: left;
	padding-left: 35px;
	}
	
	
	
	
	
/* about SMALL button */	
	
.btnabout {

    border: 1.7px solid black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
	text-decoration: none;
}

.aboutsm {
	
    border-color: black;
    color: black;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.aboutsm:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	

/* brands SMALL section */		
	
.brands {
	
	text-align: center;
	letter-spacing: 1px;
	padding-bottom: 80px;
	padding-top: 70px;
	
}
	
.brands img {
		max-width: 100%;
		padding-top: 15px;
	}
	
.brands h5 {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	}

hr {
	opacity: .4;
}
	
	
	




	
/* contact SMALL section */




section#contactsm{
	background-color: white;
	padding-top: 120px;
	padding-bottom: 150px;
	padding-right: 35px;



	
	}
		
section#contactsm h3{
	text-align: left;
	color: black;
	padding-left: 72px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;

		
	}
	
section#contactsm h2{
	text-align: left;
	color: black;
	padding-bottom: 10px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 36px;	
	line-height: 80px;
	padding-left: 70px;
	
		
	}
	
section#contactsm p{
	text-align: left;
	color: #grey;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 35px;
  	font-size: 17px;
	letter-spacing: .5px;
	padding-left: 70px;
	padding-right: 50px;
	padding-bottom: 25px;
	}
		
section#contactsm h4{
	padding-top: 35px;
	text-align: left;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    font-weight: medium;
	color: #0e69d9;
		font-size: 12px;
	}
	

	
	
	
	
	
/* get in touch SMALL button*/	

buttonsm {
    border: 1.7px solid #111111;
    background-color: none;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    font-weight: bold;
	color: black;
    cursor: pointer;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 11px;

	}	
	
	buttonsm:hover {
	Background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;}
	
	.tooltipsm {
    position: relative;
    display: inline-block;
	border: none;
    outline: none;
    background: none;
    font-weight: 300;
    cursor: pointer;
    color: inherit;
	margin-left: 70px;

}

.tooltipsm .tooltiptextsm {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

.hidesm {
       opacity: 0;
	   margin: -20px;
    }
	
.tooltipsm .tooltiptextsm::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
	
	
	
	
	
	
	
	

	
	
	


	

	
	
	
	
/* footer SMALL column*/
	

* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.footercolumnsm {
    float: left;
    width: 50%;
    padding: 10px;
	text-align: left;
	padding-left: 70px;
}

/* Clear floats after the columns */
.rowsm:after {
    content: "";
    display: table;
    clear: both;
}
	
	
section#bottomnavsm h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 1px;
	padding-bottom: 5px;
		
	}
	
section#bottomnavsm p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 12px;
	
}
	
section#bottomnavsm {
	background-color: #ebebeb;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 300px;
	
}
	
section#bottomnavsm a{
	text-decoration: none;
	color: black;
	}
	
section#bottomnavsm a:hover{
	color: #0e69d9;
	font-weight: normal;

	
	}
	
section#socialsm a{
	padding-right: 5px;
	}

	
	
section#footer {
	text-align: center;
	color: #98a3ae;	
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #111111;
	}
		
section#footer p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	letter-spacing: .5px;
	font-size: 11px;
	}

		
	
	


	

	



	
	










@media (min-width: 955px)
{


article {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}	
	
html{
	height: 100%;
}
	
.big {
	display: block;
}

.small {
	display: none;
}

.iphone {
	display: none;
}

	
	

	
	
	
	

	
	
/* navigation */	
	
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 30px;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
     position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
	
	.button {
		padding: 20px;
		padding-left: 50px;
		position: fixed;
		top: 0;
		width: 100%;
		background-color: white;
		
		
	}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
	
	
	

	
	

	
/* top banner */
	
section#title {
	height: 100%;
	background-color: white;
	padding-top: 190px;
	/*margin-top: 70px;*/
	/*padding-bottom: 100px;*/
	/*background: url('../images/selfpromo1.jpg') no-repeat center center;*/
	background-size: cover;

	
}
	
	


section#title h2{ 
text-align: center;
padding-bottom: 50px;
	color: black;
	font-size: 35px;
	padding-top: 15px;
	line-height: 50px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
	letter-spacing: 1px;

}
	
section#title h1{
text-align: center;
	color: #0e69d9;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;

}
	

	
	/* learn more top button */	
	
.btnntitle {

    border: 1.7px solid black;
    background-color: none;
    padding: 14px 28px;
    cursor: pointer;
	text-decoration: none;
 	display: block;
 	max-width: 148px;
  	margin: auto;
}

.top {
	
    border-color: black;
    color: black;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.top:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	
	

	
	

	
/* design section */
	
	
.img__wrap {
  position:sticky;
  height: 400px;
  width: 400px;
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 20px;
}	

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.85);
  color: black;
  visibility: hidden;
  opacity: 0;
	text-align: center;
	text-decoration: none;
  padding-top: 150px;


  /* transition effect. not necessary */
  transition: opacity .7s, visibility .7s;
}
		
.img__description h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 17px;
	letter-spacing: 1.5px;

	}
		
.img__description h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 13px;
	line-height: 18px;
	color: #0B57C0;
	letter-spacing: 1px;
		
	}
	
.img__wrap img {
		max-width: 100%;
	}
			

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
  text-align: center;
  text-decoration: none;
  padding-top: 150px;


	
}
	
.img__wrap:hover .img__description h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	 line-height: 17px;
		letter-spacing: 1.5px;

	}
			

section#design{
	text-align: center;
		margin-top: 100px;
	margin-bottom: 100px;
}	

section#design img{

	max-width: 100%}
	
	




	
	
	
/* art section */
	
.flex-container {
  display: flex;
  flex-wrap: nowrap;

}

.flex-container .box {
  width: 50%;
  margin: 10px;
  text-align: left;
  color: white;
}
	
	

section#art{
	background-color: #111111;
	padding-top: 130px;
	padding-bottom: 160px;
	margin-bottom: 150px;
	padding-right: 35px;
	padding-left: 35px;

	
	}
		
section#art h3{
	text-align: left;
	color: white;
	padding-left: 86px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;

		
	}
	
section#art h2{
	text-align: left;
	color: white;
	padding-bottom: 20px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 60px;	
	line-height: 80px;
	padding-left: 70px;
	
		
	}
	
section#art p{
	text-align: left;
	color: #98a3ae;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 39px;
  	font-size: 19px;
	letter-spacing: .5px;
	}
		
section#art h4{
	padding-top: 50px;
	text-align: left;
	padding-left: 70px;
	}
	
	
	
	
	
/* check out my art button */	
	
.btn {

    border: 1.7px solid black;
    background-color: #111111;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
	text-decoration: none;
}

.art {
	
    border-color: white;
    color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.art:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	
	
	

	
	
	
	
	
	
	
/* new about section */	


* {box-sizing: border-box}

.section-block {
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}	
	
.bkg-grey-ultralight {
    background-color: #ebebeb;
    border-color: #ebebeb;
}
	
.right {
	text-align: left;
	padding-right: 150px;
	padding-left: 50px;
}	

body {
    padding: 0;
    margin: 0;
    background: white;
    color: black;
	font-family: 'Montserrat', sans-serif;   
    font-size: 1.4rem;
    line-height: 1.8;
	
}	

section#whoami h3{	
	text-align: left;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;
	}
	
section#whoami h2{
	text-align: left;
	color: black;
	padding-bottom: 15px;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 30px;	
	line-height: 50px;
	}
	
section#whoami p{
	text-align: left;
	color: grey;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 30px;
  	font-size: 15.6px;
	padding-bottom: 40px;
	letter-spacing: .5px;
	}

	
html {
    font-size: 62.5%;
}

.hero-5.right > .media-column {
    left: auto;
    right: 0;
}
	
.hero-5 .media-column {
    background-image: url(../images/self.png);
}
	
.hero-5 .media-column {
    height: 100%;
    background-image: url(../images/self.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
	
.width-6 {
    width: 50%;
}
	
	
	
	
/* learn more about me button */	
	
.btnn {

    border: 1.7px solid #111111;
    background-color: none;
    padding: 14px 28px;
    cursor: pointer;
	text-decoration: none;
}

.whoami {
	
    border-color: #111111;
    color: black;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 11px;
}

.whoami:hover {
    background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;

}
	
	

	
	
.brands {
	text-align: center;
	letter-spacing: 1px;
	padding-bottom: 80px;
	padding-top: 80px;
	
}
	
.brands img {
		max-width: 100%;
	}
	
section#whoami h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	}

hr {
	opacity: .4;
}
	
	
	




	
/* contact section */

.contact {
  display: flex;
  flex-wrap: nowrap;

}

.contact .box2 {
  width: 50%;
  margin: 10px;
  text-align: left;
  color: white;
}

section#contact{
	background-color: white;
	padding-top: 120px;
	padding-bottom: 150px;
	padding-right: 35px;



	
	}
		
section#contact h3{
	text-align: left;
	color: black;
	padding-left: 86px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 12px;

		
	}
	
section#contact h2{
	text-align: left;
	color: black;
	padding-bottom: 50px;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 60px;	
	line-height: 80px;
	padding-left: 70px;
	
		
	}
	
section#contact p{
	text-align: left;
	color: grey;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
 	line-height: 39px;
  	font-size: 19px;
	letter-spacing: .5px;
	}
		
section#contact h4{
	padding-top: 20px;
	text-align: left;

		font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    font-weight: medium;
	color: #0e69d9;
		font-size: 12px;
	}
	

	
	
	
	
	
/* get in touch button*/	

	button {
    border: 1.7px solid #111111;
    background-color: white;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
    font-weight: bold;
	color: black;
    cursor: pointer;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 11px;
	}	
	
	button:hover {
	Background-color: #0e69d9;
	border-color: #0e69d9;
    color: white;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
			font-size: 11px;}
	
	.tooltip {
    position: relative;
    display: inline-block;
	border: none;
    outline: none;
    background: none;
    font-weight: 300;
    cursor: pointer;
    color: inherit;
	margin-left: 70px;

}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

.hide {
       opacity: 0;
	   margin: -20px;
    }
	
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
	
	

	
	
	


	

	
	
	
	
/* footer column*/
	

* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.footercolumn {
    float: left;
    width: 33.3%;
    padding: 10px;
	text-align: left;
	padding-left: 70px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
	
	
section#bottomnav h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 1px;
	padding-bottom: 5px;
		
	}
	
section#bottomnav p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 12px;
	
}
	
section#bottomnav {
	background-color: #ebebeb;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 300px;
	
}
	
section#bottomnav a{
	text-decoration: none;
	color: black;
	}
	
section#bottomnav a:hover{
	color: #0e69d9;
	font-weight: normal;

	
	}
	
section#social a{
	padding-right: 5px;
	}	
	
	



	
section#footer {
	text-align: center;
	color: #98a3ae;	
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #111111;
	}
		
section#footer p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	letter-spacing: .5px;
	font-size: 11px;
	}