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

body {
align-content: center;width: 100%;height: auto; margin: auto;margin-top: 0px;
padding: 0px; overflow-x: hidden; font-size: 1.5vw;
background-color: #E7E2E1; font-family: "ubuntu"; color: #17171E;
}
/* header */
header {
	height: 15%; background-color: #193441; position: fixed; top: 0; width: 100%; z-index: 4;
}
li {
	 text-decoration: none;
}
nav {
float: right; margin-top:1%; width: 70%; font-size: 1.25vw;
}
.nav {
	margin: 0 0 0 5%; text-decoration: none; display: inline-block; color: #E7E2E1; padding: 1% 2%; border-radius: 12px;
}
.nav:hover, .nav:active {
	background-color: #E7E2E1; color: #193441;transition: .6s;
}
.logo {
	float: left; margin: 2% 0 1% 2%; width: auto; max-height: 50%;transform: .6s;
}
.logo:hover {

}



/* End heder */

/* General */
/*Fonts*/
@font-face {
  font-family: ubuntu; src: url((https://sullivandemarest.com/assets/font/Ubuntu-Regular.ttf);

}
@font-face {
	font-family: ubuntu-bold; src: url(https://sullivandemarest.com/assets/font/Ubuntu-Medium.ttf); font-weight:bold;
}
/*End-Fonts*/
a {
	text-decoration: none; text-decoration-line: none; text-decoration-style: none; text-decoration-color: none; color: inherit;
}
.container {
	width: 100%; height: auto; margin: 5% 0; font-family: : inherit;
}

.odd {
	background-color: #3E606F; color: #E7E2E1;
}
.content {
	width: 60%; margin: 0 auto; display: block; padding: 2% auto;
}

h1 {
	color: #193441; font-size: 3.5vw;
}

h2 {
	color: #3E606F; font-size: 2.5vw;
}
h1, h2 {
	margin: 5% 0 2% 2%; padding: 2% 0 2% 0; font-family: "ubuntu-bold";
}
.table{
	display: table; margin: 0 auto; width: 100%;
}

p {
	margin: 0 2% 0 2%; text-indent: 20px; text-align: left; padding: 2% 0 2% 0;
}
.hero {
	width: 100%; border-radius: 3px; box-shadow: 0 5px 6px black; top: 0;
}
.top{
	margin-top: 12%;
}
.button{
	padding: .25% 2%; border: none; border-radius: 8px; display: block; margin: 2%; font-size: 1.5vw;
}
.button:hover{
	background-color: #122F80; color: white;
}


/* End General */


/* footer */
footer {
	bottom: 0; display: grid; grid-template-columns: auto 5% auto; background-color: black; width: 100%; border-radius: 10px 10px 0 0; margin: 5% 0 0;
}
.connect {
	grid-column: 3/3; text-align: center; color: #E7E2E1; margin: 8% auto 0; float: right;
}
.connect-link, .site-links{
	color:  #E7E2E1;
}
.site{
	grid-column: 1/3; text-align: left; color: #E7E2E1; margin: 8% auto;
}
.ftitle{
	font-size: 4vw; margin: 10% 0 5% 0; color: #E7E2E1;
}
.accent-bar {
	background-color:  #E7E2E1; width: 2%; height: 10%; margin: 0% 0 1% 5%;
}



.site-links {
	text-decoration: none; list-style: circle inside; margin: 0 5% 2% 0;
}
.site-links:hover, .connect-link:hover {
	color: #3E606F;
}
/* End footer */

/* Pages: resume */
object {
	width: 100%; overflow-y: scroll; height: 100vh; display: block; margin: 0 auto;
}

.title {
	text-align: center; margin: 15% auto 0; text-shadow: 1px 1px 1px black; font-size: 4vw; display: block;
}

/*  Pages: index */
#headshot{
	max-width: 40%; max-height: auto; margin: 5% 2% ; position: relative; float: right; border-radius: 10px;
}
#hero{
	 float: left; line-height: 180%;
}
#index-row-2{
	 position: relative; margin-top: 30%; padding: 10% 5% 15%; text-align: left; line-height: 200%; font-size: 1.85vw;
}

.hero-line{
	font-size: 3vw; color: #163898; width: 100%;  text-align: center; text-shadow: 1px 2px 4px gray;
}
.home-block{
	width: 16em; height: 10em; margin: 2% auto; border-radius: 10px; padding: .25%; display:block;
}
.home-pic{
	max-width: 50%; margin: 7% auto 0;  border-radius: 10px; display: block; padding: none; position:  inherit;
}
.med{
	margin: 13% auto 0;
}
.small{
	margin: 17% auto 0;
}
.home-block:hover, .home-block:active{
	padding: .75% .25%; transition: .6s ease; background-color: #0E2565;
}
.home-block:hover > .home-cap{
	display: block; transition: .4s ease-in; background-color: rgba(14, 37, 101, .75);
}

.home{
	max-width: 80%; margin:0 auto 4%; display:block;
}
.left{
	float: left; margin-top: -.25%;
}
.right{
	float: right; margin-top: -.25%;
}
.center{
	display: block; float:middle;
}

.home-cap{
 margin: 7% auto; position: absolute; display: none; z-index: 2; width: inherit; background-color: RGBA(22,56,152,.75);
}
.bullet{
	background-color:  #163898; cursor: pointer; height: 1.5vh; width: 1.5vh; border-radius: 50%; display: inline-flex;
}

/* End Pages: index */

/*  Pages: portfolio */

/* Gallery */
#fsp-video{
    text-align: center;
}

.slideshow {
    display: none; margin: auto;
}

.slide-contain {

  position: relative; display: block;
  margin:3% auto;
}
.photo{
	display: block; margin: auto; width: 60%; border-radius: 3px;
}
.prev, .next{
  cursor: pointer; position: absolute; top: 40%; padding: .2%;
  width: auto; color: #163898; margin: auto;
  font-weight: bold;font-size: 4vh;transition: 0.6s ease;user-select: none;
}
.next{
	right: 0;
}
.prev{

}
.prev:hover {
	padding: .5% 4%;
	border-radius: 3px;

}
.next:hover {
  padding:  .5% 4%;
  border-radius: 3px;
}
.prev:hover, .next:hover     {
  background-color: #163898; background-blend-mode:lighten; color: silver;

    overflow: hidden;
}



.dot {
    cursor: pointer;
  height: 1.5vh;
  width: 1.5vh;
  margin: 0 2px;
  background-color: #163898;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;

}
.active, .dot:hover {
  background-color: #7B83DB;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* End: Gallery */

.backto{
	font-size: 1vw; color: inherit; text-decoration: none; font-family: inherit; padding: 0; margin: 0;
}

.port-link{
	 padding: 1.5% 4%; margin: 0 3%; border-radius: 30px; text-align: center;  display: inline;
}
.port-link:hover{
	background: #0F276A; padding: 2% 4%; transition: .6s;
}
#port-link{
	width: 98%;    list-style: none;  font-family: inherit; text-align: center; margin: 5% 0;
}
.vector {
	width: 48%; margin: 2% auto; border-radius: 3px; display: block; padding-top: 5%;
}

#whisky{
	width: 20%;
}
.port {
	margin: 2% auto;
}
figure {
	margin: auto;
}
.banner {
	width: 20%; margin: 2% auto; display: block;
}
.logos {
	width: 40%; margin: 0 auto 10% 30%;
}
figcaption {
	text-align: center; color: #025959; margin-top: -1%; background-color: none; border-radius: 10px;
}
.next-section{
	float: right;
}
.prev-section{
	float: left;
}


/* End Pages: portfolio */

/*  Pages: connect */
#connect-box{
	margin: auto;
}
#linkedin {
	margin: auto 40% auto;
}

#connect {
	font-family: "ubuntu"; color: #163898; font-size: 1.5vw

}

/* form */
.error {
	color: red;
}
#success {
	font-size: 3vw;  color: #998F7A; text-align: center;  width: 70%;   box-shadow: 0vw .5vw 1vw black;
	background-color: #595347; padding: 10% 0 5 10%;  padding-bottom: 8%; border-radius: 0 0 5px 5px; padding-top: 5%;
}
.success{
	text-align: center; color: red; display:  none;
}

.form {

	width: 50%;margin: -.5% auto 5%; border-radius: 20px; overflow: hidden;  display: flex; flex-direction: column;

}
input, button {
	border:0;
}
.input{
	padding: 1.5%;
}

.input, .submit, .success{
	background-color: white; color: #163898; font-family: "latha"; font-size: 1.2vw; font-weight: 700; text-transform: capitalize; letter-spacing: .2vw;
}
input:hover, textarea:hover{
	background-color: silver;
}


.submit{
	background-color: silver; color: white; padding: 1% 2%;
}
.submit:hover {
	background-color: white; color: #163898;
}
textarea{
	border: 0;
}
.input:focus::placeholder{
	color: white;
}
#required {
	color: red;
}


#form {
	box-shadow: .5vw 0vw 1vw black;
}

.form-row {
    padding-bottom: 2%;
}
form {
	margin: 10% auto;
}
#email{
	margin: 3% 0; padding: 0 0 3%;
}

/* end: form */

/* End Pages: connect */

/* Pages: about */
.quick-bio {
	list-style: square outside; margin: 0 0 1% 5%; text-decoration: none;
}
#about{
	margin-top: 5%;
}
#map{
	display: block; text-align: center; margin: auto; overflow: hidden;
}
/* End Pages: about */

/* Start ERROR: 400 */
.h1-error{font-size:5vw; margin-bottom:0px; color: #193441; font-size: 4vw; text-align: center; font-family: ubuntu-bold; font-weight: 1000;
}
.h2-error{
	font-size: 1vw; text-align:center; color:#17171E;
}
.error-logo{
	max-width:100%; display: block; text-align: center; margin:5% 0%;
}
/* End ERROR: 400 */

@media screen and (max-width: 1024px){
	.input, .submit, .success{
		font-size: 2vw;
	}
	.form{
		width: 80%;
	}
	nav{
		width: 60%;margin-top:1.5%;
	}
	header{
		height: 10%; padding: -2% -1%; margin-top: -2%;
	}
	.logo{
		height: 35%; margin-top: 3%;
	}
	.logo:hover{
		height: 38%;
	}
	.bullet{
		height: .75vh; width: .75vh;
	}
	.home-cap{
		display: block; margin-top: 10%;
	}
	.content{
		width: 80%;
	}
	object{
		height: 130vh;
	}
}

@media screen and (max-width: 649px){

	.input, .submit, .success{
		font-size: 3vw;
	}
	.form{
		width: 85%;
	}
	body{
		font-size: 3vw;
	}
	nav{
		font-size:.15vw; padding: 2% 4% -8%; width: 75%; margin: 2 2% 1% 0;
	}
	header{
		height: 8%;
	}
	li{
		font-size: 2.5vw;
	}
	.content{
		width: 95%;
	}
.left, .right, .center{
	float: none;
}
.home-cap{
	display: block; margin-top: 20%;
}
.home-block{
	width: 20em; height: 14em;
}
object{
	height: 85vh;
}
.button{
	font-size: 3vw; padding: 1% 2%;
}
.backto{
	font-size: 2vw;
}
h1{
	font-size: 6vw;
}
.banner{
	width: 30%;
}
.video{
	margin: auto; overflow: hidden;
}
}