@charset "UTF-8";

/* 
NOTES FOR STYLES

fonts and colors
Dark orange - color:rgba(212,96,53,1);
h2 orange color - color:rgba(186,60,31,1);
organge button color - color:rgba(242,101,34, 1);
Regular	Montserrat	400	normal	
Medium	Montserrat	500	normal	
Semi Bold	Montserrat	600	normal	
test	
 */


body {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 400;
}

html {
  scroll-behavior: smooth;
}

.container {
	padding-left: 3%;
	padding-right: 3%;
}


.container, section {
	max-width: 1000px;
}

.row {
	margin-right: 0;
	margin-left: 0;
}

.header-container {
	background: url(../images/paper_header_v1.jpg);
	height: 251px;
	-webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, .1);
	box-shadow: 0 7px 15px rgba(0, 0, 0, .1);
	position: relative;
	overflow: hidden;
}

/*LINKS*/

.navbar-nav {
	margin-left: 12%;
}

.navbar .container {
    padding-left: 0;
    padding-right: 0;
}

.nav.navbar-nav a {
	color: rgba(0, 0, 0, 0.7);
	font-size: 1.4em;
	padding: 0;
	display: inline-block;
}

.nav.navbar-nav > li {
	float: left;
	margin-left: 1em;
	margin-top: 5px;
}

.nav.navbar-nav > li:before {
	content: "•";
	color: rgba(212, 96, 53, .4);
	padding-right: .75em;
	font-size: 1.8em;
} 

.nav.navbar-nav > li:first-child:before {
	content: " ";
	padding-right:0;
} 

.nav > li > a:hover, .nav > li > a:focus {
    background-color: white;
    border-bottom: solid 2px #d46035;
    padding-bottom: 2px;
}


.navbar-fixed-top {
	height: 53px;
	background-color: rgba(255, 255, 255, 1);
	z-index: 100;
	border-bottom: solid 1px rgba(212, 96, 53, .2);
	transition: background-color .5s ease-in;
}

.update_navbar {
	background-color: rgba(255, 255, 255, 1);
}

/*highlight for current page*/
.nav.navbar-nav li a.current {
    color: #d46035;
	/*
    background: #ffe5dc;
    padding: 5px 7px 8px 7px;
    border-radius: 10px;
*/
}



.main-header {
	margin-top: 53px;
	position: relative;
}

.logo {
    height: 261px;
    position: absolute;
    top: -63px;
    opacity: .50;
    pointer-events: none;
    z-index: 12;
}

.main-header .header-text {
	margin-left: 93px;
	position: relative;
}

.main-header h1 {
	color: rgba(212, 96, 53, 1);
	font-size: 5em;
	margin-bottom: .25em;
	margin-left: -4.2px;
	padding-right: .5em;
	margin-top: 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

.main-header ul {
	padding-left: 0;
}

.main-header li {
	display: inline-block;
	color: rgba(212, 96, 53, 1);
	margin-left: .2em;
	font-size: 2.75em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

.main-header li:first-child {
	margin-left: 0;
}

.header-text li:before {
	content: "•";
	color: rgba(212, 96, 53, .4);
	padding-right: .2em;
}

.header-text li:first-child:before {
	display: none;
}

.circle {
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.circle.c01 {
	border: solid 50px rgba(212, 96, 53, 0.08);
	position: absolute;
	height: 250px;
	width: 250px;
	top: 35px;
	left: -400px;
}

.circle.c01a {
	border: solid 25px rgba(212, 96, 53, 0.08);
	position: absolute;
	height: 250px;
	width: 250px;
	top: 35px;
	left: -400px;
}

.circle.c02 {
	border: solid 70px rgba(212, 96, 53, 0.07);
	position: absolute;
	height: 420px;
	width: 420px;
	top: -310px;
	right: -140px;
}

.circle.c02a {
	border: solid 35px rgba(212, 96, 53, 0.07);
	position: absolute;
	height: 420px;
	width: 420px;
	top: -310px;
	right: -140px;
}

.circle.c03 {
	border: solid 40px rgba(212, 96, 53, 0.07);
	position: absolute;
	height: 220px;
	width: 220px;
	bottom: -170px;
	right: -260px;
}

.circle.c03a {
	border: solid 20px rgba(212, 96, 53, 0.07);
	position: absolute;
	height: 220px;
	width: 220px;
	bottom: -170px;
	right: -260px;
}

.btn {
	border: none;
	font-size: 1.15em;
	padding-top: 10px;
	padding-bottom: 13px;
	line-height: 1.1;
	margin-top: .5em;
	white-space: normal;
	display: inline-block;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

.btn-primary {
	background-color: rgba(242, 101, 34, 1);
}

.btn-primary:hover {
	background-color: #d24511;
}

.btn-bottom {
	display: none;
}

.sample-info, .sample-images {
	padding: 0;
}

.sample-info, .branded-samples {
	font-size: 1.4em;
}

.sample-images {
	text-align: center;
	position: relative;
}

.sample-images.branded-samples {
	border-bottom: solid 2px rgba(0, 0, 0, 0.1);
}

.samples-container h2, .about-doug h2 {
	color: rgba(212, 96, 53, 1);
}


.samples-container {
	margin-top: 1em;
	border: 13px solid transparent;
	border-color: white;
	padding-top: 1em;
	padding-bottom: 3.5em;
	border-width: 0 0 13px 0;
	-webkit-border-image: url("../images/orange_dots_v5a.svg");
	border-image: url("../images/orange_dots_v5a.svg");
	border-image-slice: 34%;
	-webkit-border-image-slice: 34%;
	-webkit-border-image-repeat: repeat;
	border-image-repeat: repeat;
}


.samples-container.motiondesignrow {
border-bottom:none;
}
 
.intro {
	font-size: 1.7em;
}


.intro.samples-container  {
	padding-bottom: 1em;
}

.intro.samples-container p {
	max-width: 900px;
}


/*Illustrations*/

.samples-container.illustration-container.container {
 margin: auto!important;
}

.illust_girl {
	width: 95%;
	margin-right: 1em;
}

.padd-l-0 {
	padding-left: 0;
}

.sample-images.illustartion-samples div:first-child {
	padding-right: 0;
}

.sample-images.illustartion-samples div:last-child {
	padding-right: 0;
}

.illust_tree {
	-webkit-border-radius: 15%;
	border-radius: 15%;
}

/*motion graphics*/


 .embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto; }
 
.embed-container iframe,
.embed-container object,
.embed-container embed
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video-holder {
    max-width: 600px;
    margin: auto;
    border: solid 1px #b9b7b7;
}

.gifholder figure {
  margin: 30px 10px 10px 10px;
 display: inline-block;
}

.gifholder img {
 max-width: 100%;
}

.gifholder {
    text-align: center;
}

.gifholder img:hover {
    cursor: pointer;
}


/*webapps*/

.webapp_rex {
	width: 66%
}

.webapp-div {
	width: 33%;
	float: left;
	position: relative;
}

.webapp_rex+h5 {
	font-size: 2.25em;
	font-family: ClickClack;
	color: rgba(0, 0, 146, .65);
}

.webapp_lmonster {
	width: 88%;
	position: absolute;
	left: 0;
	top: -31px;
}

.webapp_lmonster+h5 {
    margin-top: 6em;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.75em;
    padding: .25em;
    padding-left: .5em;
    padding-right: .5em;
    color: #691869;
    background: rgba(255, 197, 11, .25);
    display: inline-block;
    border: solid 4px #691869;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}


/*design section*/

.design-div.col-xs-4 {
	padding-left: 20px;
	padding-right: 0;
}


/* About section */

.about-doug {
	font-size: 1.7em;
	padding-top: 1em;
}

.about-doug p {
	max-width: 900px;
	margin-top: .75em;
}


.doug-skills {
	position: relative;
	margin-top: 50px;
	margin-bottom: 50px;
/*	padding-bottom: 5px;*/
	padding-top: 0;
	background: rgb(221, 237, 247);
	/* Old browsers */
	background: -moz-linear-gradient(left, rgba(221, 237, 247, .75) 0%, rgba(221, 237, 247, .75) 50%, rgba(253, 237, 231, .75) 50%, rgba(253, 237, 231, .75) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(221, 237, 247, .75) 0%, rgba(221, 237, 247, .75) 50%, rgba(253, 237, 231, .75) 50%, rgba(253, 237, 231, .75) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(221, 237, 247, .75) 0%, rgba(221, 237, 247, .75) 50%, rgba(253, 237, 231, .75) 50%, rgba(253, 237, 231, .75) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ddedf7', endColorstr='#fdede7', GradientType=1);
	/* IE6-9 */
	border-left: 0px;
	border-right: 0px;
	border-top: 3px solid;
	border-bottom: 3px solid transparent;
	-moz-border-image: -moz-linear-gradient(left, #0d83c8 0%, #0d83c8 50%, #ef5a22 50%, #ef5a22 100%);
	-webkit-border-image: -webkit-linear-gradient(left, #0d83c8 0%, #ef5a22 50%, #ef5a22 100%);
	border-image: linear-gradient(to right, #0d83c8 0%, #0d83c8 50%, #ef5a22 50%, #ef5a22 100%);
	border-image-slice: 1;
}

.doug-skills ul {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
}

.side-dev {
/*	padding-left: 3em;*/
}

.side-dev h3, .side-dev li {
	color: #05689d;
	padding-top: 0;
}

.doug-skills h3 {
	font-size: 1.75em;
	margin-top: 7px;
	font-weight: 500;
}

.doug-skills li {
	font-size: 1.35em;
	margin-top: .22em;
}

/* .side-design ul li:last-child {
	line-height: 1.1;
} */

.side-design {
/*	padding-left: 12em;*/
}

.side-design h3, .side-design li {
	color: #b5461c;
}

/* Doug image and animation */

.doug-image-div-small {
	display:none;
}

.doug-image {
/*	max-height: 100%;*/
/*	position: absolute;*/
/*	z-index: 1;*/
/*	left: 50%;
	transform: translatex(-50%);
	z-index:50;	*/
}
svg#DougSmall, svg#DougLarge {
	overflow:hidden;
}

svg#DougSmall g#SHead, svg#DougLarge g#Head {
	opacity:0;
}
	
svg#DougSmall g#Smouth.smile, svg#DougLarge g#mouth.smile{
  animation: smile .25s 1.25s ease-out forwards;
  
}	

svg#DougSmall g#SHead.goUp, svg#DougLarge g#Head.goUp{
		animation: head_up 1s ease-in forwards;
		-webkit-animation: head_up 1.25s forwards; 
	}	
	
svg#DougSmall g#SHead:hover path#Sleft_x5F_eyebrow,
svg#DougSmall g#SHead:hover path#Sright_x5F_eyebrow,
svg#DougLarge g#Head:hover path#left_x5F_eyebrow,
svg#DougLarge g#Head:hover path#right_x5F_eyebrow {
		animation: eyebrows .5s;
		cursor:pointer
	}
	

	@keyframes head_up {
		0% { 
			transform: translateY(100%);
			opacity:1;}

		100% {
			transform: translateY(0);
			opacity:1;}	
		
	}
	
	
	@keyframes eyebrows {
		
		25% {transform: translateY(-15px)}
		
		50% {transform: translateY(0)}
		
		75% {transform: translateY(-15px)}
		
		100% {transform: translateY(0)}
		
	}
	
@keyframes smile {
  
  100% {transform: translateY(2%);}
  
}


/* ******************************************
	Footer General Styles 
****************************************** */

footer {
	background-color: #26282c;
	color: #fff;
	width: 100%;
	overflow: hidden;
	border-top: solid 1px black;
}


.mail-door {
/*    transform: translateY(-100%);*/
    background: #26282c;
    position: relative;
    z-index: 50;
}



.mail-message-holder {
    width: 100%;
    height: auto;
    padding: 30px 3%;
    background-color: rgb(39, 41, 44);
    position: absolute;
    box-shadow: 0px 3px 13px 0px rgba(0,0,0,.3);
    top: -100%;
    visibility: hidden;
    transition: top 500ms;
}


section.contactMe p.mail-message-paper {
    margin-bottom: 0;
    margin-top: 0;
    color: #FFF;
    font-size: 1.5em;
    font-weight: 300;
    float: left;
    padding-top: 0;
    max-width: 60%;
}



section.contactMe .message-status-button {
	float: right;
	position: relative;
	color: #ffffff;
    background-color: #5c648d;
    font-size: 1.4em;
    padding: 10px 20px 8px 20px;
    border-radius: 5px;
	
}

.message-status-button:hover {
	color: #ffcf8b;
    text-decoration: none;
}    

section.contactMe .message-status-button.alert-button { 
    background-color: #e03130;
    padding: 10px 30px;
}

section.contactMe .message-status-button.alert-button:hover {
	color:#f7f9b3;
	background-color:#E07B36;
}


.mailbot-holder, .mailbot-decline-holder {
    width: 589px;
    position: absolute;
    bottom: -26px;
    right: 39px;
    visibility: hidden;
    line-height: 0;
}

.mailbot-holder img, .mailbot-decline-holder img{
	max-width:100%;
}

.mail-monitor-holder {
    width: 100%;
    position: absolute;
    bottom: -3%;
    left: 15%;
    text-align: center;
    line-height: 0;
     
 }

 .mail-monitor-holder img {
    vertical-align: inherit;
    max-width: 100%;
}



.monitor-gif-holder {
    position: absolute;
    width: 277px;
    top: 100px;
    left: 50%;
    transform: translateX(-57%);
}

 .monitor-gif-holder img {
 	max-width: 100%;
 }

section#contact {
    max-width: 960px;
    margin: auto;
    background: #98816a;
    background-image: url(../images/mailbot_background_v1.jpg);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: height 2s;
}

section#contact.open-door {
	transition: height 2s;
}


section.contactMe .contactText.content h2 {
	font-weight: 400;
	color: #e4bd38;
	padding-top: 20px;
	margin-top: 0;
}

section.contactMe p, .samples-container p {
	padding-top: 1em;
/*	padding-bottom: 1em;*/
}

section.contactMe a {
	color: #ffa35f;
}

section.contactMe a:hover {
	color: #e4bd38;
}

footer .footer-copy {
    color: #777;
    font-size: 1em;
    text-align: center;
    padding: 1em;
    border-top: solid 1px #777;
    font-weight: 300;
    max-width: 970px;
    margin: auto;
    padding-bottom: 5em;
    padding-top: 4em;
}

.footer-copy p {
	float: right;
} 

.footer-copy ul {
  list-style: none;
		float: left;
		padding-left: 0;
		margin: 0;
}

.footer-copy li {
    display: inline-block;
    margin-left: 1.5em;
    color: #327FC0;
    margin-bottom: .5em;
}

.footer-contact {
    float: left !important;
}

.footer-contact a:hover {
    color:white!important;
}

.footer-copy li:first-child {
    margin-left: 0;
}

.footer-copy li a {
    text-decoration: none;
    border-bottom: solid 1px;
    font-weight: 300;
}

.footer-copy li a:hover {
    color: #e4bd38
}




/* ******************************************
	Form General Styles
****************************************** */

form {
	padding: 0 1%;
}

fieldset {
	border: none;
}

label {
	display: block;
	margin-top: .25em;
	font-size: 1.25em;
	color: #fff;
	font-weight: 300;
}

input, textarea {
	display: block;
	width: 100%;
	height: 2em;
	background-color: #efefef;
	font-weight: 400;
	color: #3a3a3a;
	padding: .5em;
	border: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 1.25em;
	margin-top: .25em;
	margin-bottom: .75em;
}

textarea {
	height: 6.5em;
}

input:focus, textarea:focus {
	border: 1px solid #97d6eb;
}


/**
	 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
	 * 2. Improve readability and alignment in all browsers.
	 */

textarea {
/*	padding-bottom: 10%;*/
	overflow: auto;
	/* 1 */
	vertical-align: top;
	/* 2 */
}

.send {
	display: inline-block;
	max-width: 20em;
	font-size: 1.25em;
	line-height: .005;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: #0074b0;
	/*margin: .65em .26em;*/
	padding: 1.25em;
	border: 0;
	border-radius: 1em;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .65);
	margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 1em;
    margin-bottom: 3em;
}

.send:hover {
	background: #ffb54c;
}

.send:active, .send:focus {
	background: #555;
}


.form-messages {
    position: absolute;
    top: 51px;
    transform: rotate(-20deg);
    color: #a94442;
    left: 31px;
    max-width: 250px;
    text-align: center;
    /* border: solid 1px; */
    padding: 5px;
    font-size: 3.4em;
    line-height: 1.15;
}

/* ******************************************
	Form Messages
****************************************** */

.success {
	padding: 1em;
	margin-bottom: 0.75rem;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #468847;
	background-color: #dff0d8;
	border: 1px solid #d6e9c6;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.error {
	padding: 1em;
	margin-bottom: 0.75rem;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #b94a48;
	background-color: #f2dede;
	border: 1px solid rgba(185, 74, 72, 0.3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}





/* ******************************************
	Media Queries for screen wider than 43.75em (700px)
****************************************** */


@media screen and (min-width: 43.75em) {
	.name, .email {
		float: left;
		width: 50%;
	}
	.name {
		padding-right: .65em;
	}
	.email {
		padding-left: .65em;
	}


}



/* ******************************************
	Media Queries for screen wider than 60em (960px)
****************************************** */


@media screen and (min-width: 60em) {
	.name, .email {
		padding-right: 1.3em;
		padding-left: 0;
		clear: both;
	}

	.message textarea {
		width: 50%;
	}
	
	.send {
		width: 45%;
		margin-left: 50%;
		transform: translateX(-50%);
	}

}

/* ******* Media query < 1270 *******  */

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

	.navbar-nav {
		margin-left: 12%;
	}
}


/* ******* Media query < 991 *******  */

@media screen and (max-width: 991px) {
	
	
		.main-header li {
		font-size: 2.25em
	} 
	

	.logo {
    z-index: 8;
	height: 212px;
    top: -39px;
    left: 33px;
	}
	
	
	.main-header .header-text {
    margin-left: 118px;
	}
	
	.circle.c01, 	.circle.c01a {
		left: -359px;
	}
	
	.btn-top {
		display: none;
	}

	.btn-bottom {
		display: block;
		clear: left;
		width: 50%;
		margin: auto;
	}
	
	/*Main Header*/
	.navbar-nav {
		margin:auto;
	}

	.nav.navbar-nav > li {
	    margin-left: .75em;
	}


	.nav.navbar-nav > li:before {
    padding-right: .5em;
	}


	nav.navbar > .container {
	    padding-left: 0;
	    padding-right: 0;
	}

	.container.main-header {
    padding-right: 0;
	}

	.intro {
	font-size: 1.4em;
	}	
	
	/*main page samples area*/
	.samples-container {
		margin-top: 0;
	}
	
	.col-xs-4 {
		padding-left: 0;
	}
	
	.sample-info p:first-child {
		padding: 0;
	}
	
	.sample-images.illustartion-samples {
		margin-top: 1em;
		margin-bottom: 2em;
	}
	
	.illust_girl {
		width: 200px;
	}
	
	.webApp-samples {
		padding-top: 1.5em;
		padding-bottom: 2em;
	}
	
	.webapp_rex+h5 {
		font-size: 1.5em;
	}
	
	.webapp_lmonster {
		width: 68%;
		left: 28px;
		top: -13px;
	}
	
	.webapp_lmonster+h5 {
		margin-top: 6em;
		font-size: 1.75em;
	}
	
	.webapp_rainForest {
		margin-top: 1em;
	}
	
	.sample-images.branded-samples {
		margin-bottom: 3em;
		margin-top: 1em;
	}
	
	.about-doug {
		font-size: 1.4em;
	}
	
	.doug-list.side-dev {
		padding-left: 7%;
	}
	
	.row.doug-skills h3 {
		font-size: 1.5em;
	}
	
	form#contactForm, .contactText.content {
		/*padding-left: 1%;*/
		padding-left: 5%;
		padding-right: 5%;
	}
	
	.contactText.content h2 {
		padding-left: 0;
	}
	
	.footer-copy ul {
    float: none;
    margin: auto;
    margin-bottom: 1.5em;
	}
	
	.footer-copy p {
		float: none;
		margin: auto;
	} 
	
	footer .footer-copy {
	padding-bottom: 2em;
	}

	section#contact {
/*	height 400px;
*/	}



}


/* ******* Media query < 767 *******  */

@media screen and (max-width: 767px) {
	
	
	.main-header .header-text {
		margin-left: 16%;
	}
	

	.logo {
		left:6%;
	}

	.navbar-collapse .nav.navbar-nav > li {
    margin-left: 0;
	}

	.nav.navbar-nav li a.current {
    color: #fdeebe;
	}
	

	/*Sample Page*/
	.container {
		padding-left: 6%;
		padding-right: 6%;
		padding-bottom: 2em;
	}
	
	.sample-info p {
		margin-bottom: 2.1em;
		line-height: 1.25;
		font-weight: 300;
		margin-bottom: 0;
	}
	
	.sample-images.illustartion-samples {
		margin-top: 2em;
		margin-bottom: 3em;
	}
	
	.webapp_rex+h5 {
		font-size: 2.5em;
	}
	
	.webapp_lmonster+h5 {
		margin-top: 6em;
	}

	.webapp_lmonster {
    width: 75%;
    }
	
	.sample-images.branded-samples {
		margin: auto;
		margin-top: 1.5em;
		margin-bottom: 1.5em;
	}
	

	
	.doug-list {
/* 		float: left;
		width: 50%; */
	}
	
	.side-design {
		padding-left: 5%;
	}

	/*	Hamburger nav menu*/
	
	.navbar-toggle .icon-bar {	
	    background: #a5370f;
	    border: 1px solid #a5370f;
	}

	.navbar-toggle {
	background-color: #f9eee5;
	margin-right: 25px;
	border: 1px dotted #ca7a5d;
	}

	.nav.navbar-nav > li {
    float: none;
				z-index: 20;
    }
	
/*	LINKS*/
	
	.nav.navbar-nav > li{
		margin-top: 0;
  		border-top: 1px solid white;
	}
	
	.nav.navbar-nav > li:before {
		display: none;
	}
	
	.nav.navbar-nav a {
		display: block;
		color: white;
		letter-spacing: .75px;
		padding: 20px 20px;
		background: #a5370f;
	}
	
	.nav.navbar-nav a:hover {
		padding: 20px 20px;
		border-bottom: none;
		background: #6f2308;
	}

	.navbar-nav {
    margin: 0;
	}


		/* Illustration page */

		.tn-holder {
		    margin: auto;
		}

	
}




/* ******* Media query < 720 *******  */

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

	/*mail door height*/
	section#contact {
	/*height: 445px;*/
	}

	section.contactMe p.mail-message-paper {
    max-width: 50%;
    }
}

/* ******* Media query < 699 *******  */

@media screen and (max-width: 699px) {
	.col-xs-4.hidden-small {
		display: none;
	}

	.webapp-div.col-xs-4:first-child {
		max-width: 250px;
	}
	
	.col-xs-4 {
		width: 50%;
	}
		
	.main-header h1 {
		font-size: 4em;
		margin-top: 16px;
	}
	
	.main-header li {
	    font-size: 2em;
	}	
	
	.logo {
		height: 185px;
		top: -40px;
		left: 10%;
	}
	
	.main-header .header-text {
		margin-left: 22%;
	}
	
	.header-container {
		height: 216px;
	}

	section#contact.open-door {
    height: 420px;
	}

	.doug-image-div-large {
		display:none;
	}

	.doug-image-div-small {
		display:block;
		text-align: center;
	}

	svg#DougSmall {
    max-width: 300px;
    margin:auto;
}


}

/* ******* Media query < 650 *******  */

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

	.mailbot-holder, .mailbot-decline-holder {
		right: inherit;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 95%;
	   } 

 section#contact.open-door {
	  height: 462px;
	}
}




/* ******* Media query < 630 *******  */

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

	
	.main-header h1 {
		font-size: 3.5em;
		margin-top: 20px;
	}
	
	
	.main-header li {
		font-size: 1.75em;
	}

	.main-header .header-text {
    margin-left: 17%;
	}

	.form-messages {
		top: 12%;
	   	left: 5%;
	   	font-size: 200%;
   	    padding: 0;
   	    max-width: 140px;
	 }

	 .doug-list.side-dev.col-xs-4,
	 .doug-list.side-design.col-xs-4 {
	 	width:50%
	 }

}	


/* ******* Media query < 575 *******  */

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

	
	.doug-image {
		display: block;
	}

	.mail-monitor-holder {
    left: 0;
    padding-left: 5%;
    }

    .monitor-gif-holder img {
        max-width: 100%;
        padding-left: 7%;
        top: inherit;
        bottom: 23%;
    }


    section#contact {
        text-align: center;
    }

   /* mail door*/

    section.contactMe p.mail-message-paper {
        max-width: 100%;
        float: none;
        }

    section.contactMe .message-status-button  {
        float: none;
        margin-top: 2em;
        display: inline-block;
        }

}


/* ******* Media query < 520 *******  */

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

	.col-xs-4.hidden-xsmall {
		display: none;
	}
	
	.col-xs-4 {
		width: 100%;
	}
	
	.illust_girl {
		width: 70%;
	}
	
	.webapp-div.col-xs-4:first-child {
		max-width: 100%;
	}
	
	.webapp_rex {
		width: 60%
	}
	
	.design-div.col-xs-4 img {
		width: 80%;
	}
	
	.btn-bottom {
		width: 90%
	}

}


/* ******* Media query < 510 *******  */

@media screen and (max-width: 510px) {
		/*	main header*/
		.header-container {
			height: 285px;
		}

		.logo {
			height: 260px;
			top: -53px;
		}
	
		.main-header h1 {
			font-size: 2.85em;
   margin-top: 10px;
   margin-bottom: 5px;
			max-width: 300px;
		}

		.main-header .header-text {
					margin-left: 31%;
		}	

		.header-text li {
					display: block;
	    margin-left: 0;
	}
	
	.header-text li:first-child:before {
	display: inline-block;
	}

}

/* ******* Media query < 445 *******  */

@media screen and (max-width: 445px) {
	section#contact.open-door {
    height: 380px;
	}
}

/* ******* Media query < 412 *******  */
.mailbot-holder, .mailbot-decline-holder {	
	margin-top:1em;
}

/* ******* Media query < 375 *******  */

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

	.main-header .header-text {
		margin-left: 35%;
	}
	
		.header-text li:before, .header-text li:first-child:before  {
	display: none;
	}

}


/* ******* Media query < 353 *******  */

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


	.monitor-gif-holder {
	    bottom: 23%;
	    top: inherit;
	}

	.monitor-gif-holder img {
	    max-width: 90%;
	}

	.footer-copy li {
    display: block;
    text-align: left;
	}

	.footer-copy li:first-child {
    margin-left: 1.5em;
	}

}