/*-----------------------------------------------------------------------------
Standard CSS Stylesheet

Theme Name:
Theme URI:      http://.com
Description:
Version:        1.0
Author:         Jason Addley
Email:          jasonaddley@gmail.com
Website:        http://www.madebyexample.net

-----------------------------------------------------------------------------*/

@import url("reset.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

/* General
-----------------------------------------------------------------------------*/

::selection { color: white; background-color: #85C8E8; }
::-moz-selection { color: white; background-color: #85C8E8; }


article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { border-top: 6px solid rgb(44,62,80); border-bottom: 6px solid rgb(44,62,80); height: calc(100% - 12px); }
body { background-image: url(images/bg-top.png); }
#container { margin: 0 auto; }
#intro { width: 100%; padding: 85px 0; position: absolute; top:  50%; margin-top: -272px; }
#intro h1 { width: 700px; margin: 85px auto 0 auto; font-size: 35px !important; line-height: 130%; color: rgb(44,62,80); }


/* Typography
-----------------------------------------------------------------------------*/

h1 { font-family: 'Open Sans', sans-serif; font-size: 44px; text-transform: uppercase; font-weight: 800; text-align: center; }
h2 { }
h3 { }
h4 { }
h5 { }

p { width: 700px; font-size: 26px; margin: 0 auto; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 140%; padding: 0 0 40px 0;}
.soundcloud { color: #FF8500; }
.soundcloud a { color: #FF8500; text-decoration: none; }
.dribbble { color: #E65059; }
.dribbble a { color: #E65059; text-decoration: none; }
.twitter { color: #00769F; }
.twitter a { color: #00769F; text-decoration: none; }
.instagram { color: #98664D; }
.instagram a { color: #98664D; text-decoration: none; }


/* Content
-----------------------------------------------------------------------------*/

#about { width: 100%; background-color: rgb(44,62,80); padding: 85px 0 45px 0; color: white; }
#about h1 { margin: 0 auto 40px auto;}

#work { width: 100%; background-color: white; padding: 85px 0; color: rgb(44,62,80); }
#work h1 { margin: 0 auto 40px auto; }

#foliowrap { width: 700px; margin: 0 auto; }
#foliowrap img { border: 1px solid #ccc; padding: 1px; margin: 0 0 10px 0; }
#foliowrap img:hover { opacity: 0.8; }
.folio1 { width: 330px; height: 176px; margin: 0 0 40px 0; float: left; }
.folio1 img { max-width: 100%; border: 1px solid #ccc; }
.folio2 { width: 330px; height: 176px; margin: 0 0 40px 0; float: right; }
.folio2 img { max-width: 100%; border: 1px solid #ccc; }

#contact { width: 100%; background-color: rgb(44,62,80); padding: 85px 0; color: white; }
#contact h1 { margin: 0 auto 40px auto;}

footer { width: 100%; background-image: url(images/bg-top.png); padding: 20px 0 16px 0; }
footer p { margin: 0 auto; padding: 0 !important; font-size: 13px; }
footer a { color: #00334C; }


/* Links
-----------------------------------------------------------------------------*/

a { color: white; }
a:hover { color: #6D9AC7; }

#top-link  {  position:fixed; right:7px; bottom:7px; color: #00334C; font-weight:bold; text-decoration:none; border: 4px solid #00334C; background-color: #efefef; font-family: 'Open Sans', sans-serif; font-size: 10px; text-transform: uppercase; padding:10px; }
#top-link a { color: #00334C; }

#top-link:hover { border: 4px solid #85C8E8; color: #85C8E8; }

/* Branding
-----------------------------------------------------------------------------*/

#logo { cursor: pointer; text-indent: -999999px; background: url(images/logo3.png) top left no-repeat; width: 404px; height: 200px; margin: 0 auto; }
#logo-mobile { display: none;}



/* Forms
-----------------------------------------------------------------------------*/

label { cursor: pointer; }
input:focus, input.focused, textarea:focus, textarea.focused{ color: #666; }

#contactform { width: 700px; margin: 0 auto;  }
#contact-left { width: 342px; float: left; }
#contact-right { width: 342px; float: right; }
#contactform input { border: 1px solid #ddd; width: 320px; margin: 0 0 20px 0; height: 20px; padding: 10px; font-family: 'Open Sans', sans-serif; color: #00715B; font-size: 16px; }
#contactform textarea { border: 1px solid #ddd; width: 320px; height: 206px; padding: 10px; font-family: 'Open Sans', sans-serif; color: #00715B; font-size: 16px; }

#go { width: 700px !important; height: 46px !important; background-color: #121A21; border: none !important; color: white !important; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 20px !important; }

::-webkit-validation-bubble-arrow{ background-color: #00334C;border: none !important; box-shadow: none !important; }
::-webkit-validation-bubble-message{ background-color: #00334C; color: white; border: none !important; box-shadow: none !important; border-radius: 4px; }