/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/****************************************/
/* HubSpot Style Boilerplate            */
/****************************************/

/* These includes are optional, but helpful. */
    @import url('http://necolas.github.io/normalize.css/3.0.1/normalize.css'); 
    @import url('http://fonts.googleapis.com/css?family=Oswald');
    @import url('http://fonts.googleapis.com/css?family=Baloo');

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

html{
  box-sizing: border-box;
}

*, *:before, *:after{
    box-sizing:border-box; /* This makes all elements disregard the box-model, meaning widths and heights include padding, margin, and border */
}

body{
    font-family: 'Oswald', sans-serif;
    margin:0; /* Removes the margin around your content that browsers add by default. Also included in normalize.css */
    font-size:16px; /* Sets a base font size inherited by other elements */
    font-weight:100; /* Sets a base font-weight values range from 100-700 (light-bold) */
    letter-spacing:1.2px; /* Sets a base letter spacing */
    display: block;
    background: #faf8f3;
}

img, video{
    max-width:100%; /* Makes images and HTML 5 video tags scale up to their natural size */
    height:auto; /* Keeps image and video dimensions proportional */
}

.hs-responsive-embed-youtube{ 
    position: relative; /* Positions the wrapper relative to other elements on the page */
    padding-bottom: 56.25%; /* This padding forces the YouTube video to maintain a standard 16:9 widescreen aspect ratio */
    padding-top: 25px; /* Adds padding to the top */
    height: 0; /* The wrapper div is given a height of 0 */
}

.hs-responsive-embed-youtube iframe{
    position: absolute; /* Takes the iFrame out of the flow of the page and positions it within the relative wrapper div */
    top: 0; /* Positions the video to the top of the parent container */
    left: 0; /* Positions the video to the left of the parent container */
    width: 100%!important; /* Forces the iFrame video to expand to the full width of the container*/
    height: 100%!important; /* Forces the iFrame video to expand to height of the container, but constrained by its padding */
    border:none; /* Removes the border from the iFrame */
}

.page-center{
    margin:0 auto !important;
    display:block;
    max-width:1080px;
    padding: 25px 0;
}

.header-container-wrapper{
    position: relative;
    display: table;
    width: 100%;
    height: 100vh;
    min-height: 480px;
    background: repeating-linear-gradient(55deg,#faf8f3,#faf8f3 3px,#88d6d6 3px,#88d6d6 10px);
    text-align: center;
    color: #FAF8F3;   
}
    
.header-content{
    position: absolute;
    top: 40%;
    z-index: 3;
    display: table-cell;
    vertical-align: middle;
    padding-left: 1rem;
    padding-right: 1rem;
}

.header-content h1{
    text-align: center;
    font-size: 6em;
    font-family: 'Baloo',cursive;
    color: #FAF8F3;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 rgba(208,45,33,1), 2px 2px 0px rgba(208,45,33,1), 3px 3px 0px rgba(208,45,33,1), 4px 4px 0px rgba(208,45,33,1), 5px 5px 0px rgba(208,45,33,1), 6px 6px 0px rgba(208,45,33,1), 7px 7px 0px rgba(208,45,33,1), 8px 8px 0px rgba(208,45,33,1), 9px 9px 0px rgba(208,45,33,1), 10px 10px 0px rgba(208,45,33,1);
}

.header-scroll{
    position: absolute;
    z-index: 3;
    bottom: 2rem;
    left: 0;
    width: 100%;
    color: inherit;
}

.header-nav{
    position: absolute;
    z-index: 5;
    left: 0;
    top: 100%;
    width: 100%;
    background: #d02d21;
    border-bottom: 1px solid black;
    text-align: center;
    
}

.header-nav-inner{
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    height: 5rem;
}

.header-nav-menu ul li{
    display: inline-block;
}

.section-about {
    margin-top:5rem; /* same as nav height 
}

.section-about, .section-contact {
    background: #faf8f3; /* off white color */
}

.section-work {
    background: #DF583C; /* Light Red color */
}

.section-news, .copyright-content {
    background: #88d6d6; /* Light Blue color */
}

.social-content {
    background:#D02D21; /* Dark Red color */
}

.section-about, .section-work, .section-news, .section-contact {
    position:relative;
    padding: 5rem;
    /*height:100vh;*/
    /*padding: 10rem 5rem 5rem;  10 is 5 + Nav Height(5) */
}

.section-about, .section-work, .section-news, .section-contact, .social-content {
    border-bottom: 2px dashed black !important;
}

.footer {
    padding:2rem 5rem;  
    text-align:center;
}

h1 {
    margin-top: 0;
}

i.fa.fa-chevron-circle-down{
    font-size: 4em;
    color: #faf8f3;
    text-shadow: 1px 1px 0 rgba(208,45,33,1), 2px 2px 0px rgba(208,45,33,1), 3px 3px 0px rgba(208,45,33,1), 4px 4px 0px rgba(208,45,33,1);
}

.hs-menu-wrapper ul li a:hover{
    color: #88d6d6;
}

.hs-menu-wrapper ul li a{
    color: #faf8f3;
    text-decoration: none;
    font-size: 20px;
}

a {
   transition:  color .3s ease-in-out; /* CSS3 transition that fades the colors of links when you hover over. CSS3 transitions should also include the vendor prefixes below */
   -webkit-transition:  color .3s ease-in-out;
    -moz-transition:  color .3s ease-in-out;
    -ms-transition:  color .3s ease-in-out;
    -o-transition:  color .3s ease-in-out; 
}

/*---------------------*/
.hs-menu-wrapper > ul{
    list-style-type: none;
    margin:0 auto !important;
    max-width:768px;
    display:block;
    margin-top:25px !important;
    padding:0;
}

.hs-menu-wrapper > ul > li{
    width:20%;
    display:inline-block;
    text-align:center;
    float:left; 
    position:relative;
}

ul.hs-menu-children-wrapper{
    position:absolute; /* Takes the child menu out of the flow of the page and positions it */
    list-style-type:none; /* Removes the bullets from child menu */
    background:#0D0F0C; /* Sets a background color of child menu */
    padding:0; /* Removes the padding of child menu */
    width:100%; /* Makes the child menu 100% of the width of its parent */
    display:none;
}

ul.hs-menu-children-wrapper{
    display:block; /* Undoes the display:none; added in an earlier section */
    max-height:0; /* Sets the menu to have no height */
    overflow:hidden; /* Hides the overflow of content that would appear outside of the 0 height wrapper */
    transition: all .3s ease-in-out; /* CSS3 transition that affects all CSS properties  */
    -webkit-transition:  all .3s ease-in-out;
    -moz-transition:  all .3s ease-in-out;
    -ms-transition:  all .3s ease-in-out;
    -o-transition:  all .3s ease-in-out;
}

.hs-menu-wrapper ul li.hs-item-has-children:hover ul.hs-menu-children-wrapper{
    max-height:220px; /* On hover of a menu item with children, update the max-height of the child ment to 220px. This will the appearance of the child menu dropping down */
}

ul.hs-menu-children-wrapper li{
    margin:20px 0; /* Sets space between child list items */
}

ul.hs-menu-children-wrapper li a{
    color:#BB0303; /* Colors the links of the child list item links */
}

ul.hs-menu-children-wrapper li a:hover{
    color:#DFB201; /* Colors the link of the child list item links on hover */
}

.hs-menu-wrapper ul li.hs-item-has-children:hover ul.hs-menu-children-wrapper{
    display:block; /* Makes child menu appear on hover */
}

.js-css {
    display: none !important;
}

  /* this make our menu fixed top */
.f-nav {
    z-index: 9999; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%;
}

@media (max-width:768px) {
    /*.header-nav {*/
    /*    display:none !important;*/
    /*}*/
    
    
    .header-container-wrapper{
        background: #88d6d6;
    }
   
    
    .header-content h1 {
        font-size: 5em;
    }
    
    .row-fluid [class*="span"] {
        width:100%;
    }
    
    .portfolio-images {
        text-align:center;
    }
    
    .work-images {
        margin: 0 auto;
    }
    
    .work-items {
        padding-bottom:20px;
    }

}

@media (max-width: 479px) {
    
    .header-content {
        top:30%;
    }
    
    .header-content h1 {
        font-size: 3em;
    }
    
    .header-scroll {
        bottom:5rem;
    }
    
    .section-about, .section-work, .section-news, .section-contact {
        padding: 3rem 3rem 3rem; /* 8 is 3 + Nav Height(5)*/
    }

    .footer {
        padding:2rem 3rem;  
    }
    
    .espuppets-body {
        text-align:center;
    }

    .social-content-icons {
        display:none !important;
    }
    
    .social-content {
        padding:0;
    }
    
}

input.hs-button.primary.large {
    /*-webkit-border-radius: 0;*/
    /*-moz-border-radius: 0;*/
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    font-family: Arial;
    color: black;
    font-size: 18px;
    background: #88d6d6;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

input.hs-button.primary.large:hover {
  background: #7abfbf;
  text-decoration: none;
}

input.hs-button.primary.large:focus {
    outline:0;
}


.hs-form input[type="text"],
.hs-form input[type="password"], 
.hs-form input[type="datetime"], 
.hs-form input[type="datetime-local"], 
.hs-form input[type="date"], 
.hs-form input[type="month"], 
.hs-form input[type="time"], 
.hs-form input[type="week"], 
.hs-form input[type="number"], 
.hs-form input[type="email"], 
.hs-form input[type="url"], 
.hs-form input[type="search"], 
.hs-form input[type="tel"], 
.hs-form input[type="color"],
.hs-form input[type="file"],
.hs-form textarea,
.hs-form select {
    width:100%;
    margin-bottom: 20px;
    margin-top: 5px;
    border-radius: 10px;
    height: 50px;
    /*border: 1px solid black;*/
    padding-left: 20px;
    border: 2px dashed black;
    box-shadow: 0 0 0 4px #ffffff, 2px 1px 6px 4px rgba(255, 255, 255, 1);
}
.hs-form input[type="text"]:focus,
.hs-form input[type="password"]:focus, 
.hs-form input[type="datetime"]:focus, 
.hs-form input[type="datetime-local"]:focus, 
.hs-form input[type="date"]:focus, 
.hs-form input[type="month"]:focus, 
.hs-form input[type="time"]:focus, 
.hs-form input[type="week"]:focus, 
.hs-form input[type="number"]:focus, 
.hs-form input[type="email"]:focus, 
.hs-form input[type="url"]:focus, 
.hs-form input[type="search"]:focus, 
.hs-form input[type="tel"]:focus, 
.hs-form input[type="color"]:focus,
.hs-form input[type="file"]:focus,
.hs-form textarea:focus,
.hs-form select:focus {
    /*border: 2px dotted black;*/
    
    outline: 0;
    background: #88d6d6;
    
   /*    border: 2px dashed black;*/
   box-shadow: 0 0 0 4px #88d6d6, 2px 1px 6px 4px rgba(255, 255, 255, 1);
}

ul.hs-error-msgs.inputs-list {
    margin-top: -20px;
}

ul.share-buttons{
  list-style: none;
  padding: 0;
  text-align:center;
  padding:10px;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/*.share-buttons img:hover {*/
/*    transform: scale(1.1);*/
/*}*/

/*.share-buttons img {*/
/*    transition: all .2s ease-in-out;*/
/*}*/

.work-images, .work-post-title {
    /*margin:0 auto;*/
    /*text-align:center;*/
}

.work-post-title {
    padding-bottom:10px;
    font-size:20px;
}

.work-images {
    width:200px;
    height:200px; 
    background-size: auto 200px; 
    background-repeat: no-repeat;
    background-position: center center;
}

.work-items {
    overflow:hidden;
}