@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|PT+Sans+Narrow|Raleway');
body {
    background-color:#eee;
    font-family: 'roboto';
}

a { font-family: 'Roboto';
    color:black;}
a:hover { color:firebrick; }

.white { color:white; }
.bwhite { background-color:white; }

a:active { color:firebrick; }


.text-right {
    text-align: right;
    margin: 25px 0 0  0;
}
.text-center {
    text-align: center;
}
.text-left { text-align: left !important; }


h1, h2, h3, h4, h5 {
    font-family: 'Roboto', sans-serif;
}

.margin5 {padding:10px !important;
}

.endspace {

    margin-bottom: 50px;

}

.flex-container {

    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-row {
    flex-direction: row;
}

.flex-item {
    display: flex;
    line-height:4.5em;
    margin-left:auto;
}
.flex-item2 {
    display: flex;
    margin:0 50px;
    width:100px;
    height:100px;
    background-color:#333;
    padding: 0 50px;
    font-size:1em;
}

.flex-container-social {

    display:flex;
    width: 33%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
}

.flex-social-item {
    display:flex;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    background-color:333;
    font-size:2.5em;
}

.flex-facebook { padding: 15px 35px;}
.flex-twitter {padding: 15px 23px;}
.flex-instagram {padding: 15px 23px;}
.flex-email {padding: 13px 19px;}


.flex-item-specific {
    padding-left:40px;
}
/*=====================================*/
/*
/*============ MENU SCREEN ============*/


@media (max-width: 660px) {
    .menu {
         visibility: visible;
    }
    .menu-screen {
        display:none;
    }
}


@media  (min-width:661px) {
    .menu { visibility: hidden; }
    .menu-screen + container{ display:block; }
}

.menubar-container {
    display:block;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }




@media  (min-width:661px) {
    .menu { visibility: hidden; }
    }
}

.menu h1.logo a:hover { color: #E08603 !important;}


/*=============Header==================*/

.Header {
    display: flex;
    height:645px;
    width:100%;
    background-position: right center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index:101;
    position:absolute;
}

.header-content {

    display:flex;
    justify-content: space-around;
}

.logo {
    display:flex;
    background-image: url(../img/raccoon_white2.png);
    background-size:contain;
    background-position: center center;
    width:10.5em;
    height:8em;
}

.icon {
    font-size: 3em !important;
    padding-top: 0.6em;
}


/*=====================================*/
/*
/*=============White Section===========*/
@media (max-width: 600px) {
    #w { margin:20px;}
    #servicewrapper { margin:20 0px !important;
                      padding:0px !important;}
}



/*=====================================*/
/*
/*=============Services Palette========*/

#servicewrapper {


    text-align: center;
    padding: 80px 0;
    margin: 50px auto;
}

.service-item {

    width: 100%;
    min-height: 300px;
    border: px black solid;
    margin: 10px auto;
    transition: .5s;
    padding: 10px 20px;
}

@media (min-width: 600px) {
    .service-item {
        margin: 25px auto;
    }

}


.service-item ol li {

    list-style: none;

}

.service-item:hover {

    background-color:#fc4c4c;
    color:white;

}

.service-img-container {
    margin: 10px auto;
}

@media (min-width: 600px) {

    .service-img-container {
        margin: 28px auto;
    }
}



.service-img-container:hover {

    background-blend-mode: color-burn;
    background-size: cover;
    border-radius: 25px;
    opacity: 1;


}

.service-background-1 {
    background-image: url(../img/patch/overwatch-cu.jpg);
    background-position: center center;
    background-size:contain;
}

/*===========================================
             Gallery Snapshots
============================================*/

#portfolio-single {
    min-height: 400px !important;

}


/*************************************
********About CSS INDEX SECTION*******
*************************************/
#about-us {
  background-image: url(../img/sew3.jpeg);
  padding: 135px 0;
}

#about-us h2 {
  margin-top: 0;
  color: #fff;
}

#about-us .lead {
  font-size: 16px;
  margin-bottom: 10px;
}

#about-us h1 {
  margin-bottom: 30px;
}

.progress{
  height: 20px;
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin-bottom: 25px;
}

.progress-bar{
  box-shadow: none;
  -webkit-box-shadow: none;
  text-align: right;
  padding-right: 12px;
  font-size: 12px;
  font-weight: 600;
}


.progress .progress-bar.six-sec-ease-in-out {
  -webkit-transition: width 2s ease-in-out;
  transition:  width 2s ease-in-out;
}


/*====================================*/
/*
/*=============== Footer =============*/
#socialwrapper {

    background-color:#444;
    min-height: 100px;
    padding:30px;
}
#footer-table-wrapper {

    background-color:#333;
    min-height: 80px;
}
#footerwrapper {

    background-color:#444;
    min-height: 100px;
}


.footertable {
    background color:darkgray;
    min-height:400px;
    padding: 5em 0 3em;
}

.footer-lineheight {
    line-height: 7em !important;
}

.footer-font-h1 {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 20px !important;
    padding: 0 0 0.7em;
}

@media (max-width: 600px) {
.footer-font-h1 {
    margin:50px 0 0;
    }
}

ul {
    padding: 0 !important;
    margin: 0;
    list-style-type: none;
    color:#aaa;
}

.list-font {

    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    line-height:1.5em;
}
#footer-table-wrapper a {
  color:#aaa;
}

/*=============END OF INDEX CSS========================*/

/********* ABOUT THE COON **********
***********************************/
#aboutheader{

    padding: 10px 0 30px 0 ;
    text-align: center;
}

#aboutwrapper {
    text-align: center;
}

#wabout {
	background: #eee;
	padding-top: 60px;
	padding-bottom: 30px;
	text-align: center;q
}

.bpw {

    background-image: url('../img/banner.jpg');
    background-color:darkgrey;
    width: 100%;
    min-height: 400px;
    background-size:contain;
}

@media (max-width:600px) {
    .bpw {
        min-height:120px;
    }
}

.paperwhite {

    /*background-color:#fdf5e8;*/
    background-color:white;
    text-align:justify;
    min-height: 480px;
    margin-right: 20px;
    padding:150px 100px;;
}

@media (max-width:600px) {
    .paperwhite {
        padding:70px 50px;
    }
}

.about-float-1 {

    background-color: cornflowerblue;
    height:225px;
    margin-top:5px;
    margin-bottom: 20px;

}

.about-float-2 {

    background-color:;
    height: 225px;

}

.about-float-3 {

    background-color: white  ;
    height: 450px;
    padding: 60px 40px;
    margin-top:20px;

}
.aboutus-paddingfix {
    padding-top:5px;
}

.about-workspace {
    background-image: url('../img/EHD_Studio_Dog.jpg');
    background-position: center;
    background-size:contain;
    width:100%;
    background-color:white;
    height: 450px;
    border: px black solid;
    margin: 25px auto;
    transition: .5s;
    padding: 10px 20px;
}

@media (max-width:600px) {
    .about-workspace {
        height:210px !important;

    }
}

.about-clientlist {

    background-color:white;
    min-height:300px;
    padding: 50px 80px;
}

.about-gallery {
    background-image:  url('../img/gallerybannersmall-dark.jpg');
}

.about-service {
    background-image:  url('../img/service-mini.jpg');
}

.ptsansnarrow {
    font-family: 'PT Sans Narrow';
}
.about-gallery-font h1{
    line-height: 5em;
    font-size: 3em;

}


/*=============END OF ABOUT CSS========================*/

/********* PRODUCT PAGE  **********
***********************************/

.product {
     transition:all ease;
}

.product .desc {
    display: none;
    opacity: 0;
    transition:opacity 2s, transform 2s;

}

.desc:hover {
    }

.product:hover .desc  {

    display:block;
    position: absolute;
    bottom: 0px;
    background:rgba(0,0,0,0.8);
    opacity:1;


    text-align: center;
    line-height: em;
    font-size: 15px;
    height:6em;
    width:92.5%;
    z-index: 1;
}

@media (max-width:600px) {
   body { background-color: white;}

    .desc {
    width: 84.5% !important;
    height:100% !important;
    overflow: auto;
    }
}

.product, .desc h1 {
    color:white;
    font-size: 21px;
}

#gallerywrapper {


    text-align: center;
    margin: 40px auto;
}
.gallery-header {
    background-image: url(../img/gallerybanner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width:100%;
    height: 450px;
    padding:20px 0;
}
.paperwhite2 {

    /*background-color:#fdf5e8;*/
    background-color:white;
    text-align:justify;
    min-height: 480px;
    padding:32px 100px;;
}
@media (max-width:600px) {
    .paperwhite2 {
        padding:5px 25px;
    }
}


.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 0px;

}

@media (max-width:600px) {
    .filter-button {
        font-size:14px;
        border-radius:2.5px;
        margin: 2px auto;
        }
    .filder-button:hover {
        font-size:14px;
        border-radius: 2.5px;
    }
}

.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}

.fixed-buttons {

    position: fixed;
    padding:30px;
    top:0px;
    z-index:99;
}
.fixbuttons {
    padding: 30px;
}

.gallery-padding {padding:20px;}


#product-lm {
    display:block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width:100%;
    height: 450px;
    padding: 20px 0;
    margin: 50px auto;
}

@media (max-width:600px) {
  #product-lm {
    margin: 0;
    padding:0px;
    height: 316px;

  }
  #gallerywrapper {
    margin: 0;
  }

}

.thumbnail-1 .thumbnail-2 .thumbnail-3 .thumbnail-4 {


    padding: 20px 0;
}

.price {
  font-size: 2em;
  font-weight: bolder;
  font-family:'open sans';
  text-align: right;

}
.price-subtext {
  font-family:'open sans';
  text-align: right;
  margin: -20px 0 0 0;
}

.product-lm-picture-0 {
    background-image: url(../img/patch/laughingman-gallery.jpg);
}
.product-lm-picture-1 {
    background-image: url(../img/patch/laughingman.jpg);
}
.product-lm-picture-2 {
    background-image: url(../img/patch/laughingman-gallery.jpg);
}
.product-lm-picture-3 {
    background-image: url(../img/patch/laughingman-gallery.jpg);
}
.product-lm-picture-4q {
    background-image: url(../img/patch/laughingman-gallery.jpg);
}


button .product-lm-1:hover, .product-lm {
    display:
}


button {
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: top;
    border: 0px;

}

button.etsystore {
  border-radius: 10px;
  background-color:white;
  border: 3px solid orange;
  color:orange;
  padding:20px 10px;

}


#close-image img {
    display: block;
    height: 90px;
    margin: 15px auto;
}
@media (max-width: 600px) {
  #close-image img{
    margin:5px auto;
    height:64px;
  }
}

/************** CONTACT ****************/
/*
/****************************************/


.contact-margin-left{
margin: 50px 0 50px 50px;
}

.contact-margin-right{
margin: 50px 0px 50px 0;
}
.contact {
  padding: 110px 0;
  text-align: center !important;
  height: 500px;
}
@media (max-width:600px) {
  .contact {
    padding: 110px 50px;
  }
  .mobile-fix {
    margin: 0 0 -40px;
  }

}

.contact h1 {
  font-size: 25px;
  line-height:5px;
  font-weight: 400;
  }
.contact h2 {
  font-size: 20px;
}

.contact-social {

  padding: 4em 0 4em;
}

.icon-facebook {
  margin: 0 2px 0 8px;
  font-size: 1.2em;
}
.icon-twitter {
  margin: 0 0 0 2px;
  font-size: 1.2em;
}
.icon-envelope {
  font-size: 1.2em;
}

.form-bg {

  background-color:#ff5126;

}
.form-style {
  padding: 30px 0 0;
}

.form-style input {
  width: 100%;
  height: 50px;
  border: 2px solid white;
  border-radius: 40px;
  padding-left: 10px;
  margin: 7.5px 0  ;
}
.form-style textarea {
  width: 100%;
  height: 150px;
  margin: 10px 0 ;
  border: 10px solid white;
  border-radius: 30px;
  padding:10px 0 0 10px;
  resize:none;
}

.form-style button {
  color: white;
  background-color: #ff5126;
  border: 2px solid #fff;
  border-radius:30px;
  padding:5px 15px;
  margin-top:15px;
}

@media (max-width:600px){
  .form-style {
    padding:70px 20px 30px;
  }
  .contact {}

}

.quickform-style input {
  width: 100%;
  height: 50px;
  border: 2px solid white;
  border-radius: 40px;
  padding-left: 10px;
  margin: 7.5px 0  ;
}
.quickform-style textarea {
  width: 100%;
  height: 150px;
  margin: 10px 0 ;
  border: 10px solid white;
  border-radius: 30px;
  padding:10px 0 0 10px;
  resize:none;
}
.quickform-style button {
  color: white;
  background-color: #333;
  border: 2px solid #666;
  border-radius:30px;
  padding:5px 15px;
  margin-top:10px;

}