/* CSS Document */

body{
	margin: 0 auto;
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

@keyframes come-in {
  to { transform: translateY(0); }
}

main{
	padding-bottom:3%;
	background-color:#FFF;
	margin-top:4%;
}
img{
	max-width:640px;
	margin-bottom:5%;
	display:block;
	margin-left: auto;
	margin-right: auto;
	width:90%;
	transition: 0s, ease-out,0.80s;

}
i{
  	color:#0066C7;
	padding-top:3%;
	transition: color 0s, ease-out,1s;

}
i:hover{color:#ffa400;}
/*styles  button links*/
.sticky i:hover{color:#fff;}
/*styles footer button link*/

ul li{
	margin-left:-10%;
	font-family: 'Montserrat', sans-serif;
}
ol{
	font-size:0.95em;
	margin-left:3%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	line-height:1.5;
	padding:3%;
	width:90%;
/*	list-style-type: disc;*/
}
/*syles bullets*/

h1{
	font-size:1.8em;
	font-family: 'Montserrat', sans-serif;
	margin-bottom:5%;
	padding-bottom:1.9%;
	padding-top:5%;
	font-weight:800;
	background-color:#003b71;
	text-align: center;
	text-transform:uppercase;
	color:#fff;
}
#contact h1{
	margin-top: 1%;
	padding-top:3%;
}

h2{
	font-size:1em;
	font-family: 'Montserrat', sans-serif;
	font-weight:600;
	margin:1%;
	margin-left:5%;
	margin-top:5%;
	padding-top:2%;
	color:#0160b6;

}
h2 a{
	font-size:1.2em;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	font-weight:600;
	color:#0066C7;
}
h3{
	font-family: 'Montserrat', sans-serif;
	margin-top:1.2%;
	color:#0066C7;
	font-size:0.95em;
	font-weight:400;
}

h3 a{
	color:#0160b6;
	text-align:center;
	font-size:1.2em!important;
	padding-top:5%;

}
.contact_icons h3{
	display:none;
}
h4{
	font-size:0.95em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	max-width:1000px;
	line-height:1.4;
	padding-bottom:1.3%;
	padding-left:3%;
}
h6{
	margin:1%;
	padding-left:3%;
	padding-top:2%;
	padding-bottom:1%;
	color:#002d55;
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	text-align:center;
	font-size:0.95em;
}
p{
	font-size:0.95em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	line-height:1.5;
	padding-top:1%;
	margin-left:5%;
	padding-right:5%;
	max-width:1000px;
}
footer{
	padding-bottom:3%;
	margin-top:3%;
}

/*STYLES CLASSES */


.arrow-down{
	position:relative;
	width:32px;
	top:20px;
	margin:3% auto 0 auto;
}
.arrow-down:hover{
	color:#ffa400;
}

/*styles arrow pointing down button*/
.content{
	background-color:#fff;
	margin-top:3%;
	padding-bottom:3%;
}
/*styles content class */

.container{
display:flex;
justify-content: space-between;
align-items: flex-start;
margin-right:10%;
}
.education h3{
	margin:3%;
	margin-left:5%;
	margin-bottom:1%;
}

.home .container{
	display:block;
}

.dark-blue{
	background-color: #002d55;
	padding:1%;
	padding-bottom:5%;
}
/*styles dark blue background*/
.fa-arrow-circle-up:hover{
	color:#002d55;
}
/*styles arrow pointing up button*/
.flex_column_1 li{
	margin-left:0;
}

.header_white{
background-color: #fff;
}
.header_white i{
	color:#0066C7!important;
}.header_white i:hover{
	color:#ffa400!important;
}
.hide{
	display:none;
}
/*styles header pages-*/
.icons a{
	margin-right:3%;
}
/*styles icons link*/
h2.illustrations{
	padding-top:5%!important;
}
.menubtn{
	width:32px;
	margin:3% auto 0 auto;
}
/*styles menu button class*/
.mobile-nav{
	text-align:center;
	display:none;
	color:#002d55;
	background-color:#002d55;
	margin-bottom:2%;
	margin:1%;
	padding:3%;
	font-size:1.2em;
	margin-top:12%;
	position:absolute;
	right:0;
	width:92%;
	z-index:1;
}
/*styles mobile nav*/
.mobile-nav_bottom{
	background-color:#fff;
	padding-bottom:2%;
	margin-bottom:2%;
	padding-top:2%;
	text-align:center;}



.mobile-nav_bottom .dropdown .dropbtn{
color:#0066C7}
.mobile-nav_bottom .dropdown-content{
	left:23%;
}
.light-blue{
	background-color:#0160b6;
	padding:1%;
}
/*styles light blue background*/
.logo{
	width:90%;
	margin-left:10%;
}
/*styles logo */
.home .logo-link{
	display:none;
}

.home #small-nav{
	margin-top:0%;
}
.home .container{
	margin-right:0%;
}

a.logo-link{
width:40%;
max-width:180px;
}a.large_logo{
	width:90%;
	max-width:960px;
	margin: 0 auto;
}
.resume li{
	list-style-type: square;
	color:#ffa400;
	margin-left:5%;
}
.resume h1{
	margin-bottom:0;
}
.resume h2{
	margin-left:0%;
	margin-top:0%;
}

.search{
	color:#fff;
	margin-right:7%;
	margin-left:38%;
	margin-top:10%;
}
.site-link{
	margin-left:30%;
}
.single h2{
	text-transform: uppercase;
	padding:2%;
	text-align:center;
	margin-left:0%;
}

/*styles print-single pieces h2*/

.yellow{
	background-color:#ffa400;
	padding:1%;
}
/*styles yellow footer*/
.white_nav{
	margin-top:18%;
}
.home .white_nav{
	margin-top: 14%;
}
.home .contact_icons .fa-th-list{
	display:none;
}
.web_flex_item{
	list-style: none;
}

/*ENDS CLASSES STYLES*/

/*STYLES IDS */

#contact h1{
	margin-bottom:0;
}
.home #contact h1{
	padding-top:5%;
}
#contact h3{
	text-transform: none;
	padding-left:5%;
	padding-top:1%;
}
#content{
	background-color:#fff;
	margin-top:3%;
	padding-bottom:3%;
}
/*styles content id*/
#contact{
	background-color:#fff;
	margin-top:3%;
	padding-bottom:3%;
}
#contact li{
	list-style-type: square;
	color:#ffa400;
	margin-left:5%;
}
#contact .icons{
	display:flex;
}
/*styles contact id*/


#logo_background{
background-color:#fff;
min-height:70vh;
	margin-top:2%;
	padding-top:35%;
	overflow: hidden;
}
#logo_background a{
color: #002d55;
line-height:1.5;
font-size:0.75em;
}
#logo_background h1{
margin:0%;
padding:0%;
	background-color:#fff;
}
#logo_background h2{
	font-size:1.7rem;
	font-weight: 400;
	padding:0%;
	margin:0%;
}
#logo_background h2 a{
	font-weight:400;
}

#portfolio a{
	line-height:1.3;
	text-transform: uppercase;
}#portfolio a:hover{
	letter-spacing: 2.5px;
}
#portfolio{
	position:relative;
}
#portfolio img{
	 opacity: 1;
  display: block;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
#portfolio img:hover{
	display:block;
margin-left:auto;
margin-right:auto;
width:80%;
opacity: 0.3;

}
.resume_page #banner{
	max-width:100%;
}
#small-nav{
	display:flex;
margin-top:7%;}
#small-nav i{
	color:#ffa400;
	transition: color 0s, ease-out,0.50s;

}
#small-nav i:hover{
	color:#fff;
}
#small-nav .fa-instagram, #small-nav .fa-envelope{display:none;}


/*styles small-nav id*/
/*ENDS IDS STYLES*/


/*STYLES INDEX HOVER BUTTONS*/
.graphics_button {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}.print_button {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}.web_button {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 650px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.graphics_button:hover{
	opacity:1;
}
.print_button:hover{
	opacity:1;
}
.web_button:hover{
	opacity:1;
}
.graphic_text {
	background-color: #002d55;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}.print_text {
	background-color: #002d55;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}.web_text {
background-color: #002d55;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
/*ENDS BUTTON STYLES*/

/*STYLES IMAGE ROLLOVERS*/
.container_web {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  right: 0;
  width: 90%;
	height:auto;
  opacity: 0;
  transition: .5s ease;
/*  background-color: #0160b6;*/
	background-color:#0160b3e3;
}

.container_web:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
	font-family: 'Montserrat', sans-serif;
	padding-top:1.2%;
	font-size:1em;
	font-weight:400;
	line-height:1.2;
}

/*ENDS IMAGE ROLLOVERS*/


/* STYLES DROP DOWN BUTTON AND CONTENT IN MOBILE NAV*/

/* Add an active class to highlight the current page */


/* Dropdown container - needed to position the dropdown content */


/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    border: none;
    color: #FFFFFF;
    background-color: inherit;
	font-size:1em;
	padding:0%;
	margin:0%;
}.dropdown .dropbtn a :hover{
 color:#ffa400;

}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
	left:30%;
	background-color:#003b71;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    padding: 12px 16px;
    display: block;
	color:#fff!important;
	margin-left:8%;
	transition: 0s, ease-out,0.50s;
}

/* Add a dark background on topnav links and the dropdown button on hover */

.dropdown-content a:hover {
    background-color: #ddd;
	color:#ffa400!important;

}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

.flex_column_2 li{
	margin-left:0%;
}


.mobile-nav, #desktop-nav{
	display:none;
}
/*hides desktop nav and hides nav/


/*links*/

a:link, a:active, a:visited {
	color:#0066C7;
	display:block;
	text-decoration:none;
	font-family: 'Open Sans', sans-serif;
	line-height:1.9em;
	font-size:1em;
	transition: 0s, ease-out,0.80s;
}
/*styles nav links*/
a:hover {
	color:#ffa400;
	text-decoration: none;
}
.mobile-nav a {
	color:#fff;
	border-bottom: solid thin rgba(255,255,255,0.40) !important;
	margin-left:8%;
	display:block;
	transition: 0s, ease-out,0.50s;

}
.mobile-nav a:hover{
	color:#ffa400!important;
	 background-color: #ddd;

}
/*styles mobile nav links hover*/

@media screen and (min-width:768px){
/*	TABLET VIEW*/
	.header_white h3{
		display:none;
	}
	.mobile-nav_bottom ul{
		display:flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
	.mobile-nav_bottom ul li{
		margin:0 auto;
		flex:1;
	}
	#portfolio h1{
		padding-top:3%;
		margin-top:1%;
	}
	h1{
		padding-top:3%;
	}
	.resume_page h1{
		padding-top:5%;
	}
	h2{
		line-height: 1.3
	}
	h3{
		padding-top:0;
	}
	#contact h3{
		padding-top:0;
	}
	.home h1{
		padding-top:3%;
	}
	h6{
		padding-bottom:0;
	}
	ol{
		margin-left:0;
	}

	footer #content, #contact{
/*		width:99%;*/
		margin:0 auto;
	}
/*	STYLES CLASSES*/
	.resume_page .content, .resume_page main, .resume_page #banner, .resume_page .mobile-nav_bottom{
		max-width:726px;
		margin-top:0%;
		margin:0 auto;
		flex:1;

	}
	.content.education{
		margin-top:0%;
/*		margin-right:2%;*/
		margin-left:2%;
	}

	.content.experience{
		margin-top:0%;
/*		width:80%;*/
		margin-right:2%;
/*		margin-left:1%;*/
	}
	.contact_icons{
		display:flex;
		margin-top:0%;
		margin-right:30%;
		align-items:flex-start;
	}
	.contact_icons a{
		margin-right:20%;
	}
/*
	.web_flex_item_goya{
		width:50%;
		display:inline-flex;
		margin:0
	}
*/
	.dropdown-content{
		left:25%;
	}
	.mobile-nav_bottom .dropdown-content a{
		margin:0 auto;
	}
	ul.flex_column_1{
		display:flex;
		width:90%;
		margin: 0 auto;
		align-items: flex-start;
	}
	ul.flex_column_1 li{
/*		max-width:500px;*/
	}
	ul.flex_column_2{
		display:flex;
		width:90%;
		margin:0 auto;
		align-items: flex-start;
	}
	.graphics_button{
		top:37%;
		left:19%;
	}
	.home .menubtn{
		display:none;
	}
	.home .mobile-nav{
		margin-top:5%;
	}
	.home #small-nav .contact_icons{
		margin-top:0%;
		margin-left:80%;

	}
	.home #small-nav{
	margin-top:2%;
	}

	.icons{
		padding:0;
		margin-left:5%;
	}
	a.logo-link{
		width:27%;
	}
	a.large_logo{
		width:85%;
	}
	.logo_link{
		width:85%;
		max-width:500px;
	}
	.magazine{
/*		width:100%;*/
	}
	.menu{
/*
		max-width:600px;
		width:100%;
*/
	}
	.mobile-nav_bottom .dropdown-content{
	left:16%;
}

	.mobile-nav{
		margin-top:10%;
	}

	.napoleon{
/*
		max-width:600px;
		width:100%;
*/
	}
	.print_button{
		top:250px;
		left:230px;
	}
	.print h2{
	display:none;
	}
	.profile{
	width:30%;
float:right;
	max-width:200px;
display:inline-block;
margin-left:5%;
margin-right:5%;}


	.resume_page .web_flex_item{
/*		width:90%;*/
	}
	.resume_page .mobile-nav_bottom{
		max-width:1024px;
/*		width:99%;*/
	}
	.resume{
		margin-top:0%;
		margin-right:2%;
		margin-left:1%;
	}

	.spiderman_poster{
/*		max-width:270px;*/
	}
	.tech_illustration{
/*		width:97%;*/
	}
	.white_nav{
		right:0px;
		width:35%;
		margin-top:8%;
	}
/*	styles flex items*/
	.web_flex{
		display:flex;
		margin-top:5%;
	list-style: none;}
	.home .web_flex{
		display:table;
	}

	.web_flex.campaign{
	width:50%;
	}
	.web_flex_item{
		margin:0 auto;
	}
	.web_flex_item_napoleon{
/*		width:45%;*/
	}
	.web_flex_item_menu{
/*		width:115%;*/
	}

	.web_flex_item_stationery{
/*		width:90%;*/
	}
	.web_flex_item_manual{
/*		width:100%;*/
	}
	.web_button{
		top:250px;
		left:650px;
	}
	.web_flex_item_beach_painting{
/*		width:60%;*/
}

	.web_flex_item_graphic_name{
/*		width:80%;*/
	}
/*	ENDS CLASSES*/


	/*STYLES IDS*/
	#backtotop{
		width:15%;
		bottom:45px;
		left:280px;
	}
	#content h2{
		margin-top:2%;
	}
	#contact{
		margin-top:3%;
	}
	#contact h2{
	margin-top:2%;
}
	.home #contact h1{
		margin-top:0%;
		padding-top:3%;
	}
	.home #contact h2{
		margin-top:5%;
	}


	#logo_background{
		padding-top:10%;
		min-height: 90vh;
	}
	#portfolio ul{
		display:flex;
	}
	#portfolio .web_flex{
		width:95%;
		margin-top:3%!important;
		margin:0 auto;

	}
	#small-nav{
		margin-top:5%;
	}
	#small-nav .fa-instagram, #small-nav .fa-envelope, #small-nav .fa-th-list{
		display:inline;
	}
/*	ENDS IDS*/


}
@media screen and (min-width:1024px){
	img{
/*		width:70%;	*/
	margin-bottom:0;


	}
	.header_white h3{
		display:block;
		padding-right:15px;
		margin-top:2%;
		margin-left:3%;
		padding-left:10px;
	}
	.header_white .contact_icons a{
		margin-right:0%;
	}
	.border{
		max-width:1024px;
		margin:0 auto;
		/*box-shadow: 10px 10px 10px #000;*/

	}
	h1{
		margin-bottom:0;
		padding-top:3%;
		margin-top:1%;
	}
	.home #content h1{
		margin-bottom:0;
		padding-top:5%;
		margin-top:0%;
	}
	h2{
		margin-top:3%;
	}
	.resume_page h1{
		margin-bottom:3%;
		margin-top:0%;
		padding-top:5%;
	}
	.resume_page h2{
		margin-top:0%;
	}
	#contact h3{
		padding-top:0;
	}
	h6{
		padding-top:0%;
	}
	footer{
		padding-bottom:1%;
		margin-top:0%;
	}
	ol{
		padding:2%;
	}
	a.large_logo{
		width:60%;
	}
	a.logo-link{
		width:20%;
	}
	.content, main, .header_white, #banner, #contact, .mobile-nav_bottom{
		max-width:1024px;
		margin-top:0%;
		margin:0 auto;

	}
	.contact_icons{
		margin-right:0%;
	}
	.home .contact_icons a{
		margin-right:5%;
	}
	.content.experience{
	width:95%;}
	.dropdown-content a{
		margin: 0 auto;
	}
	.fa-th-list{
		display:none!important;
	}
	.home #small-nav .contact_icons{
		margin-left:50%;

	}
	.home .contact_icons h3{
		display:block;
		margin-top:2%;
		margin-left:10px;
		margin-right:10px;
		color:#ffa400;
	}
	.home .web_flex{
		display:flex;
		margin-top:1%;
		list-style: none;
	}
	.home.mobile-nav{
		margin-top:3%;
	}
	.mobile-nav_bottom .dropdown-content{
		left:17%;
	}
	.icons a{
		margin-right:2%;
		margin-top:3%;
	}
	.graphics_button{
		top:47%;
	}
	.print_button{
		top:47%;
		left:265px;
	}
	.profile{
		margin-top:10%;
		width:40%;
	}
	.resume_page .content, .resume_page main{
		max-width:1024px;
	}
	.resume_page .web_flex_item{
/*		width:95%;*/
	}
	.resume_page .web_flex{
		max-width:1024px;
		margin:0 auto;
		margin-top:1%;
	}
	.site-link{
		margin-top:2%;
	}
	.web_button{
		top:47%;
		left:750px;
	}
	.white_nav{
		margin-top:5%;
	width:20%;
	margin-right:11%;}

	.home #contact{
		margin-top:0%;
		margin-left:2%;
		width:99%
	}
	.home #contact h1{
		padding-top:5%;
	}
	.home #desktop-nav{
/*		max-width:100%;*/
	}
	#desktop-nav{
		display:block;
	text-align:center;
		margin-top:2%;
	}
	#desktop-nav ul, .mobile-nav_bottom ul{
		display:flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
	.mobile-nav_bottom ul li{
		font-size:1.2em;
	}
	#desktop-nav ul li{
		font-size:1.3em;
	}
	#desktop-nav ul li, .mobile-nav_bottom ul li{
margin:0 auto;
	}
	#logo_background{
		padding-top:5%;
		min-height:75vh;
	}
	#small-nav{
		margin-top:4%;
	}

}
@media screen and (min-width:1200px){
		.home #small-nav .contact_icons{
			margin-left:55%;}
}
@media screen and (min-width:1300px){
	.mobile-nav_bottom .dropdown-content{
		left:25%;
	}

}
@media screen and (min-width:1400px){
		.home #small-nav .contact_icons{
			margin-left:60%;}
	.mobile-nav_bottom .dropdown-content{
		left:27%;
	}


}
@media screen and (min-width:1440px){
	#logo_background{
/*		min-height:60vh;*/
	}

}
@media screen and (min-width:1500px){

	.mobile-nav_bottom .dropdown-content{
		left:27%;
	}
}
@media screen and (min-width:1700px){
		.home #small-nav .contact_icons{
			margin-left:65%;}

	.mobile-nav_bottom .dropdown-content{
		left:33%;
	}
}
@media screen and (min-width:1920px){
		.home #small-nav .contact_icons{
			margin-left:70%;}

	.mobile-nav_bottom .dropdown-content{
		left:32%;
	}
	#logo_background{

	min-height:65vh;}
}