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

/*** RESPONSIVE QUERIES ***/

@media (max-width: 767px) { /* Small */
  .uk-visible-xlarge {display: none !important;}
  .uk-container {-webkit-overflow-scrolling: touch; padding: 0px;}
  .uk-offcanvas-bar {max-width: 50%; background: #111; border-right: 1px solid #f80;}
  .uk-nav-offcanvas > li > a {color: #f80; padding: 20px 15px; font-size: 18px; font-weight: 600; font-variant: small-caps; border-bottom: 1px solid #444;}

  video {
    min-width: 100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #111;
    object-fit: fill;
  }

  #showcase h1 {color: #fff !important; font-size: 30px; line-height: 30px; font-weight: 700; margin-bottom: 20px;}
  #showcase h2 {color: #ddd !important; font-size: 16px; line-height: 16px; font-weight: 400; margin-bottom: 30px;}

  #work h1, #about h1 {color: #fff; font-size: 30px; line-height: 30px; font-weight: 700; margin-bottom: 0px; font-variant: small-caps;}
  #work h2, #about h2 {color: #ddd; font-size: 18px; line-height: 18px; font-weight: 300; margin-bottom: 20px;}
  #work h3, #about h3 {color: #f80; font-size: 24px; line-height: 20px; font-weight: 600; margin-bottom: 20px; font-variant: small-caps;}
  #work .quote {padding: 0px;}
  #work [class^="ss-button-"] {padding: 15px 10px; font-size: 14px; line-height: 55px; font-weight: 600;}

  #follow > div {width: 100%; padding: 10px 1vw !important;}

  #services {background: #eee;}
  #services > div {padding: 20px 0px;}
  #services > div > .uk-grid {margin: 0px; padding: 0px;}
  #services > div > .uk-grid > div.service-box {padding: 0px 10px 20px;}
  #services > div > .uk-grid > div.service-box > div {background: #fff; padding: 20px;}
  #services p {text-align: left; color: #111; font-weight: 300; font-size: 16px; line-height: 24px;}
  #services h1 {color: #000; font-size: 40px; line-height: 40px; font-weight: 700; margin-bottom: 30px; font-variant: small-caps;}
  #services h2 {color: #ddd; font-size: 24px; line-height: 24px; font-weight: 300; margin-bottom: 20px;}
  #services h3 {color: #000; font-size: 30px; line-height: 30px; font-weight: 400; margin-bottom: 20px; font-variant: small-caps;}
  #services i {color: #fff; background: #f80; font-size: 50px; line-height: 100px; height: 100px; width: 100px; box-sizing: border-box; border-radius: 100%; text-align: center; }

  #about .pic-fix {width: 30%;}

  #contact {background-image: url('../images/bg-004.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: 250vw auto !important; overflow: hidden !important; padding: 20px 0px; min-height: 420px; height: 420px;}
  #contact h1 {color: #fff; font-size: 40px; line-height: 40px; font-weight: 700; margin-bottom: 20px; font-variant: small-caps; text-shadow: 1px 1px 1px #000;}
  #contact h2 {color: #ddd; font-size: 16px; line-height: 24px; font-weight: 400; margin-bottom: 20px; text-shadow: 1px 1px 1px #000; padding: 20px; background: rgba(0,0,0,0.4);}
  #contact h4 i {color: #f80; background: #000; font-size: 50px; line-height: 50px; height: 50px; width: 50px; box-sizing: border-box; border-radius: 20%; text-align: center;}
  #contact h4 i:hover {color: #fff; background: #f80;}

  #footer {background: #000; color: #fff; padding: 20px 0px;}
  #footer .uk-push-1-3 {padding-bottom: 20px;}
}
@media (min-width: 768px) { /* Medium + Large + Xlarge */
  video {
    min-width: 100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #111;
    object-fit: fill;
  }

  #showcase {height: 100vh;}
  #showcase .uk-overlay {height: calc(100% - 60px); width: 100%;}
  #showcase .uk-overlay .uk-overlay-panel {padding: 0px;}
  #showcase h1 {color: #fff; font-size: 80px; line-height: 80px; font-weight: 700; margin-bottom: 30px; text-shadow: 3px 3px 2px #000;}
  #showcase h2 {color: #fff; font-size: 30px; line-height: 30px; font-weight: 400; margin-bottom: 40px; animation-delay: 7s; text-shadow: 0px 0px 3px #000;}

  #intro1 {height: 100%; padding: 0px 5vw; background: rgba(0,0,0,0.5); animation-delay: 4s;}
  #intro1 > div {animation-delay: 6s;}

  #work h1, #about h1 {color: #fff; font-size: 40px; line-height: 40px; font-weight: 700; margin-bottom: 20px; font-variant: small-caps;}
  #work h2, #about h2 {color: #ddd; font-size: 24px; line-height: 24px; font-weight: 300; margin-bottom: 20px;}
  #work h3, #about h3 {color: #f80; font-size: 30px; line-height: 30px; font-weight: 400; margin-bottom: 20px; font-variant: small-caps;}
  #work p, #about p {color: #fff; font-weight: 300; font-size: 16px; line-height: 24px;}
  #work .quote {padding: 0px 20px;}

  #services {background-image: url('../images/bg-002.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100vw auto !important; overflow: hidden !important; padding: 0px;}
  #services > div {padding: 50px 0px;}
  #services > div > .uk-grid {max-width: 1500px; margin: 0px auto; padding: 0px 1vw;}
  #services > div > .uk-grid > div.service-box {padding: 0px 10px 20px;}
  #services > div > .uk-grid > div.service-box > div {background: rgba(255,255,255,0.6); padding: 20px; height: calc(100% - 40px);}
  #services > div > .uk-grid > div.service-box > div:hover {background: #fff;}
  #services p {text-align: left; color: #111; font-weight: 300; font-size: 16px; line-height: 24px;}
  #services h1 {color: #000; font-size: 40px; line-height: 40px; font-weight: 700; margin-bottom: 55px; font-variant: small-caps;}
  #services h2 {color: #ddd; font-size: 24px; line-height: 24px; font-weight: 300; margin-bottom: 20px;}
  #services h3 {color: #000; font-size: 30px; line-height: 30px; font-weight: 400; margin-bottom: 20px; font-variant: small-caps;}
  #services i {color: #f80; background: #fff; font-size: 50px; line-height: 100px; height: 100px; width: 100px; box-sizing: border-box; border-radius: 100%; text-align: center; }
  #services > div > .uk-grid > div.service-box > div:hover i {color: #fff; background: #f80;}

  #about .pic-fix {width: 20%;}

  #contact {background-image: url('../images/bg-004.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100vw auto !important; overflow: hidden !important; height: calc(100vh - 170px); min-height: 500px;}
  #contact h1 {color: #fff; font-size: 40px; line-height: 40px; font-weight: 700; margin-bottom: 50px; font-variant: small-caps; text-shadow: 1px 1px 1px #000;}
  #contact h2 {color: #ddd; font-size: 24px; line-height: 40px; font-weight: 400; margin-bottom: 50px; text-shadow: 1px 1px 1px #000; padding: 20px; background: rgba(0,0,0,0.4);}
  #contact h4 i {color: #f80; background: #000; font-size: 120px; line-height: 120px; height: 120px; width: 120px; box-sizing: border-box; border-radius: 20%; text-align: center;}
  #contact h4 i:hover {color: #fff; background: #f80;}

  #footer {background: #000; color: #fff; padding: 10px 0px;}
  #footer .uk-text-center-small {line-height: 50px;}
/*
  #contactform {margin-left: auto; margin-right: auto; display: inline-block; padding: 25px; background: #f80; border: 3px solid #000;}
  #contactform .uk-form-label {width: 100px; margin-top: 0px; color: #000; font-weight: 600; font-size: 16px; line-height: 24px;}
  #contactform .uk-form-controls {margin-left: 35px;}
*/
}
@supports (-ms-ime-align:auto) {
  video { height: auto !important; margin-top: -5%;}
}

@media (min-width: 768px) and (max-width: 959px) { /* Medium */
  .uk-visible-xlarge {display: none !important;}
  .uk-navbar-nav > li > a {font-size: 24px !important; padding: 0px 15px !important;}
}
@media (min-width: 960px) and (max-width: 1219px) { /* Large Only */
  .uk-visible-xlarge {display: none !important;}
}
@media (min-width: 960px) { /* Large + XLarge */

}
@media (min-width: 1220px) { /* XLarge Only */
  .uk-hidden-xlarge {display: none !important;}
}

/*** GENERAL FORMATTING ***/

html, body, .uk-container  {min-height: 100vh; margin: 0px; background: transparent;}
.uk-container {max-width: 100vw !important; padding: 0 !important; background: transparent;}

.uk-grid {margin-left: 0px;}
.uk-grid > * {padding-left: 0px;}
.uk-grid + .uk-grid {margin-top: 0px;}

img {max-width: 100% !important;}

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

/*** GENERAL TYPOGRAPHY ***/

html {font: normal 14px / 20px "Open Sans", Helvetica, Arial, sans-serif; color: #000; overflow-x: hidden;}
a, .uk-link {color: #04f;} a:hover, .uk-link:hover {color: #08f;}

p, ul, ol, dl, blockquote, pre, address, fieldset, figure {margin: 0 0 10px 0;}
* + p, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure {margin-top: 0px;}

h1, h2, h3, h4, h5, h6 {margin: 0 0 15px 0; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: normal; color: #000; text-transform: none;}
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {margin-top: 0px;}

/*** CUSTOM THEME FORMATTING ***/

#showcase {background: #111;}

#topnav {background: rgba(0,0,0,1); border-bottom: 1px solid #f80; z-index: 1000;}
.uk-navbar-nav {padding: 0px 20px; float: none;} .uk-navbar-brand, .uk-navbar-toggle {float: none; height: 60px; line-height: 60px;} .uk-navbar-toggle {padding: 0px 20px; color: #fff;}
.uk-navbar-nav > li > a {color: #f80; font-size: 20px; font-weight: 600; height: 60px; line-height: 60px; padding: 0px 20px; float: none; font-family: inherit; font-variant: small-caps;}
.uk-navbar-nav > li > a:hover {background-color: transparent; color: #fff;} .uk-navbar-nav > li > a:active, .uk-navbar-nav > li > a:focus {background-color: transparent; color: #f80;}
.uk-navbar-nav > li.uk-active {background: rgba(0,0,0,0);} .uk-navbar-nav > li.uk-active > a {background-color: transparent; color: #fff;}

#work, #about {background: #000; color: #fff;}
#work > .uk-grid {max-width: 1500px; margin: 0px auto; padding: 0px 2vw;}
#work > .uk-grid > div {padding: 0px 10px;}
#work p a, #about p a {color: #ff7;} #work p a:hover, #about p a:hover {color: #ff0;}

#follow {background: #f80; color: #000; padding: 20px 1vw; z-index: 1000;}
#follow.uk-active {padding: 5px 1vw; transition: padding 0.8s ease-out;}
#follow > div {display: inline-block; padding: 0px 1vw; height: 100%; vertical-align: middle;}

#about > .uk-grid {max-width: 1300px; margin: 0px auto; padding: 0px 2vw;}
#about > .uk-grid > div {padding: 0px 20px;}

#contact > div > .uk-grid-width-1-6 {max-width: 1000px; margin: 0px auto; padding: 0px 2vw;}
#contact iframe {border: 10px solid #000 !important; border-radius: 20px !important;}


#footer > .uk-grid {margin: 0px auto; padding: 0px 2vw;}

#footer > .uk-hidden-small {max-width: 1200px; margin: 0px auto; padding: 0px 2vw;}
#footer > .uk-hidden-small > div {padding: 0px 20px;}

#footer a {color: #ff7;} #footer a:hover {color: #ff0 !important;}
#footer i {font-size: 24px; line-height: 30px; height: 30px; width: 30px;}



/*
#contactform .uk-form-controls {display: inline;}
#contactform .uk-form-controls input, #contactform .uk-form-controls textarea {min-width: 300px;}
*/
[class^="ss-button-"] {padding: 15px 20px; font-size: 15px; line-height: 65px; font-weight: 600;}
[class^="ss-button-"]:hover {text-decoration: none;}
.ss-button-1 {border: 3px solid #fff; color: #fff !important;} .ss-button-1:hover {background: #f80;}
.ss-button-2 {border: 1px solid #f80; color: #f80 !important;} .ss-button-2:hover {background: #f80; color: #fff !important;}
.ss-button-3 {background: #609; color: #fff !important;} .ss-button-3:hover {background: #408;}
.ss-button-4 {background: #b40; color: #fff !important;} .ss-button-4:hover {background: #720;}

.arrowbox { position: relative; background: #ffffff; border: 1px solid #8799a6; display: inline; margin-left: 8px; font-size: 11px; padding: 5px; border-radius: 5px;}
.arrowbox:after, .arrowbox:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrowbox:after { border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 5px; margin-top: -5px; }
.arrowbox:before { border-color: rgba(135, 153, 166, 0); border-right-color: #8799a6; border-width: 6px; margin-top: -6px; }
.arrowbox a {color: #292f33;}

/*** CUSTOM THEME TYPOGRAPHY ***/