/* Reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, img, ins, kbd, q, samp,
small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
input, select { vertical-align: middle; }
body { font:22px/26px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; *font-size:small; color:#505A69; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
a, a:hover, a:active { outline: none; }
sub, sup { font-size: 50%; line-height: 0; position: relative; }
sup { top: -0.9em; }
a:link { -webkit-tap-highlight-color: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
ul.std {list-style-type: square; margin: 0; padding: 0; }
/* Typography */

h1 {
	font: 400 34px/38px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial;
	color: #262E3B;
	margin: 0 0 25px;
	letter-spacing: -1px;
}

h2 {
	font: 400 26px/30px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial;
	color: #262E3B;
	margin: 0 0 40px;
	letter-spacing: -1px;
}

h1 a {
	text-decoration: none;
}

h2 a {
	text-decoration: none;
}

h1 strong, h2 strong { font-weight: 700; }

p { margin: 0 0 25px; }

.slack-1 { color: #20a58f;}
.slack-2 { color: #e6186f;}
.slack-3 { color: #edb624;}
.slack-4 { color: #82d2e1;}
.slack-5 { color: #3eb991;}
.sms { color: #22ba4a;}
.facebook { color: #3b5998;}
.twitter { color: #00aced;}
.telegram { color: #0088cc;}
.kik { color: #82BC23;}

.C1800F { color: #5e3987;}

#services { position: relative; }

.services {
	position: relative;
	margin: 0 0 40px;
	max-width: 540px;
}

.services.transition {
	position: absolute;
	top: 0;
	left: 20px;
}

.services li { margin: 0 0 30px; }
.services li.hide { display: none; }

#more-btn { margin-top: 40px; }

hr {
	display: block;
	max-width: 700px;
	width: 100%;
	height: 1px;
	margin: 40px auto;
	padding: 0;
	border: 0;
	border-top: 1px solid #D8D8D8;
}

a { font-weight: 700; }

/* Layout */

body { padding: 20px 0 120px; }

.container {
	position: relative;
	max-width: 760px;
	padding: 0 20px;
	margin: 0 auto;
}

/* Header */

nav {
	margin: 0 0 20px;
	text-align: right;
	background: url('https://www.assi.st/-/img/logo_name_small.png') no-repeat center top;
  background-size: 200px 163px;
  height: 163px;
  cursor: pointer;
}

nav.flower {
	margin: 0 0 20px;
	text-align: right;
	background: url('https://s3.amazonaws.com/assist-bot/flowers.png') no-repeat center top;
  background-size: 200px 89;
  height: 89;
  cursor: pointer;
}

nav a {
	color: #505A69;
	font-size: 15px;
}

/* Content */

p a {
	text-decoration: none;
	color: #505A69;
	border-bottom: 1px solid #505A69;
	transition: all linear .2s;
}

p a:hover {
	background: #505a69;
	color: #fff;
	transition: all linear .2s;
}

/* Buttons */

#get-assisted {
	position: fixed;
	display: none;
	bottom: 0;
	left: 0;
	right: 0;
	height: 62px;
	max-width: 760px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	line-height: 62px;
	background: #257DE6;
	transition: all linear .2s;
	z-index: 100;
}

#get-assisted:hover {
	background: #52af2f;
	transition: all linear .2s;
}

.btn {
    /*display: block;*/
    font: 700 18px/40px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial;
    text-align: center;
    margin: 0 0 20px;
    min-width: 300px;
    border-radius: 20px;
    border: 1px solid #287EE7;
    color: #287EE7;
    text-decoration: none;
    transition: all linear .2s;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
}



.btn-1800F {
    border: 1px solid #5e3987;
    color: #5e3987;
}


.btn:hover {
	color: #fff;
	background: #287EE7;
	transition: all linear .2s;
}

#btn-show-form {
	color: #22ba4a;
	border-color: #22ba4a;
}

#btn-show-form:hover {
	color: #fff;
	background: #22ba4a;
	transition: all linear .2s;
}

#sms-form {
	position: relative;
	/*display: block;*/
	font-weight: 700;
	font-family: 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial;
	font-size: 18px;
	text-align: center;
	margin: 0 0 80px;
	padding: 0;
	border-radius: 31px;
	height: 39px;
	width: 175px;
	color: #22ba4a;
	border: 1px solid #22ba4a;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}

#sms-form input {
	display: block;
	outline: 0;
	text-align: center;
	height: 36px;
	/*width: 90%;*/
	width: 83%;
	margin: 0 0 0 10px;
	border-radius: 20px;
	color: #22ba4a;
	-webkit-appearance: none;
	cursor: pointer;
	border: 0;
	background: none;
}

#text-me {
	position: absolute;
	display: block;
	right: -160px;
	top: -1px;
	width: 143px;
	height: 39px;
	color: #fff;
	font: 700 18px/31px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial;
	border-radius: 31px;
	border: 0;
	outline: 0;
	text-align: center;
	background: #287EE7;
	transition: all linear .2s;
	cursor: pointer;
}

#text-me:hover, #text-me.go-time {
	transition: all linear .2s;
	background: #22ba4a;
}

::-webkit-input-placeholder {  color: #999;}
::-moz-placeholder {  color: #999;}
:-ms-input-placeholder {  color: #999;}

/* Footer */

footer a {
	font: 700 15px/25px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial;
	color: #505A69;
	margin: 0 15px 0 0;
}

footer h6 {
	font-size: 12px;
	color: #505A69;
}

/* Services Colors */

a[class^='srv-'] {
	text-decoration: none;
	transition: all linear .3s;
}

.srv-fandango { color: #f5a724; border-bottom: 0px solid #f5a724; }
.srv-seamless { color: #f63d3d; border-bottom: 0px solid #f63d3d;}
.srv-grubhub { color: #dc3d52; border-bottom: 0px solid #dc3d52; }
.srv-eat-24 { color: #f56023; border-bottom: 0px solid #f56023; }
.srv-booking { color: #2566af; border-bottom: 0px solid #2566af; }
.srv-talkto { color: #52af2f; border-bottom: 0px solid #52af2f;}
.srv-foursquare { color: #334997; border-bottom: 0px solid #334997;}
.srv-opentable { color: #DA3743; border-bottom: 0px solid #DA3743;}
.srv-resy { color: #e5382e; border-bottom: 0px solid #e5382e;}
.srv-uber { color: #09091A; border-bottom: 0px solid #09091A;}
.srv-lyft { color: #EA0B8C; border-bottom: 0px solid #EA0B8C;}
.srv-citymapper { color: #30A81C; border-bottom: 0px solid #30A81C;}
.srv-yellowtaxi { color: #FFBF00; border-bottom: 0px solid #FFBF00;}
.srv-stubhub { color: #003168; border-bottom: 0px solid #003168;}
.srv-seatgeek { color: #135BB1; border-bottom: 0px solid #135BB1;}
.srv-stubhub { color: #003168; border-bottom: 0px solid #003168;}
.srv-postmates { color: #36454f; border-bottom: 0px solid #36454f;}
.srv-olset { color: #00A1CD; border-bottom: 0px solid #00A1CD;}
.srv-greatclips { color: #5e88a2; border-bottom: 0px solid #5e88a2;}
.srv-lob { color: #47b2e8; border-bottom: 0px solid #47b2e8;}
.srv-floristone { color: #9875AC; border-bottom: 0px solid #9875AC;}
.srv-facebook { color: #3b5998; border-bottom: 0px solid #3b5998;}
.srv-sms { color: #22ba4a; border-bottom: 0px solid #22ba4a;}
.srv-slack-1 { color: #20a58f; border-bottom: 0px solid #20a58f;}
.srv-slack-2 { color: #e6186f; border-bottom: 0px solid #e6186f;}
.srv-slack-3 { color: #edb624; border-bottom: 0px solid #edb624;}
.srv-slack-4 { color: #82d2e1; border-bottom: 0px solid #82d2e1;}
.srv-slack-5 { color: #3eb991; border-bottom: 0px solid #3eb991;}
.srv-telegram { color: #0088cc; border-bottom: 0px solid #0088cc;}
.srv-kik { color: #82BC23; border-bottom: 0px solid #82BC23;}
.btn-1800F { color: #5e3987; border-bottom: 1px solid #5e3987;}

.srv-fandango:hover { border-color: #f5a724; background: #f5a724; color: #fff; transition: all linear .3s; }
.srv-seamless:hover { border-color: #f63d3d; background: #f63d3d; color: #fff;transition: all linear .3s; }
.srv-grubhub:hover { border-color: #dc3d52; background: #dc3d52; color: #fff; transition: all linear .3s; }
.srv-eat-24:hover { border-color: #f56023; background: #f56023; color: #fff; transition: all linear .3s; }
.srv-booking:hover { border-color: #2566af; background: #2566af; color: #fff; transition: all linear .3s; }
.srv-talkto:hover { border-color: #52af2f; background: #52af2f; color: #fff;transition: all linear .3s; }
.srv-foursquare:hover { border-color: #334997; background: #334997; color: #fff;transition: all linear .3s; }
.srv-opentable:hover { border-color: #DA3743; background: #DA3743; color: #fff;transition: all linear .3s; }
.srv-resy:hover { border-color: #e5382e; background: #e5382e; color: #fff;transition: all linear .3s; }
.srv-uber:hover { border-color: #09091A; background: #09091A; color: #fff;transition: all linear .3s; }
.srv-lyft:hover { border-color: #EA0B8C; background: #EA0B8C; color: #fff;transition: all linear .3s; }
.srv-citymapper:hover { border-color: #30A81C; background: #30A81C; color: #fff;transition: all linear .3s; }
.srv-yellowtaxi:hover { border-color: #FFBF00; background: #FFBF00; color: #fff;transition: all linear .3s; }
.srv-stubhub:hover { border-color: #003168; background: #003168; color: #fff;transition: all linear .3s; }
.srv-seatgeek:hover { border-color: #135BB1; background: #135BB1; color: #fff;transition: all linear .3s; }
.srv-stubhub:hover { border-color: #003168; background: #003168; color: #fff;transition: all linear .3s; }
.srv-postmates:hover { border-color: #36454f; background: #36454f; color: #fff;transition: all linear .3s; }
.srv-olset:hover { border-color: #00A1CD; background: #00A1CD; color: #fff;transition: all linear .3s; }
.srv-greatclips:hover { border-color: #5e88a2; background: #5e88a2; color: #fff;transition: all linear .3s; }
.srv-lob:hover { border-color: #47b2e8; background: #47b2e8; color: #fff;transition: all linear .3s; }
.srv-floristone:hover { border-color: #9875AC; background: #9875AC; color: #fff;transition: all linear .3s; }
.srv-facebook:hover { border-color: #3b5998; background: #3b5998; color: #fff;transition: all linear .3s; }
.srv-sms:hover { border-color: #22ba4a; background: #22ba4a; color: #fff;transition: all linear .3s; }
.srv-slack-1:hover { border-color: #20a58f; background: #20a58f; color: #fff;transition: all linear .3s; }
.srv-slack-2:hover { border-color: #e6186f; background: #e6186f; color: #fff;transition: all linear .3s; }
.srv-slack-3:hover { border-color: #edb624; background: #edb624; color: #fff;transition: all linear .3s; }
.srv-slack-4:hover { border-color: #82d2e1; background: #82d2e1; color: #fff;transition: all linear .3s; }
.srv-slack-5:hover { border-color: #3eb991; background: #3eb991; color: #fff;transition: all linear .3s; }
.srv-telegram:hover { border-color: #0088cc; background: #0088cc; color: #fff;transition: all linear .3s; }
.srv-kik:hover { border-color: #82BC23; background: #82BC23; color: #fff;transition: all linear .3s; }
.srv-C1800F:hover { border-color: #5e3987; background: #5e3987; color: #fff;transition: all linear .3s; }
.C1800F:hover { border-color: #5e3987; background: #5e3987; color: #fff;transition: all linear .3s; }


.logo {
    width: 30%;
    height: auto;
}

.logo-desc{
    position: relative;
    -webkit-font-smoothing: auto;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: inline;
    font-family: 'Lyon Text Web', Georgia, Baskerville, serif;
    font-size: 65%;
    font-style: italic;
    height: auto;
    line-height: 20px;
    width: auto;
    word-wrap: break-word;
    bottom: 1em;
    padding-left: 10px;
    padding-top: 100px;
    white-space: pre-line;
}




/* Media Queries */

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

    nav {
      margin: 0 0 20px;
      text-align: right;
      background: url('https://www.assi.st/-/img/logo_name.png') no-repeat center top;
      background-size: 400px 326px;
      height: 326px;
      cursor: pointer;
    }

    nav.flower {
    	margin: 0 0 20px;
    	text-align: right;
    	background: url('https://s3.amazonaws.com/assist-bot/1-800-flowers.jpg') no-repeat center top;
      background-size: 475px 267px;
      height: 267px;
      cursor: pointer;
    }

    .container { margin: 0 0 0 200px; }

    h1 { font: 400 50px/56px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial; }

    h2 { font: 400 36px/42px 'Proxima Nova', 'Helvetica Neue', 'Helvetica', Arial; }

    hr {
    	max-width: 760px;
    	margin-left: 220px;
    }

    #sms-form { min-width: 240px; width: auto; }

    #get-assisted {
    	border-radius: 62px;
    	bottom: 20px;
    	left: 220px;
    }

    #sms-form input {
    	width: 90%;
		margin: 0 auto;
    }

    #text-me {
    	right: -160px;
    	top: -1px;
    	width: 140px;
    }


    .logo {
        width: 50%;
        height: auto;
    }


    .logo-desc{
        bottom: 40px;
        font-size: 80%;
        display: inline-block;
    }
}