:root{
    --link: rgb(59, 161, 161);
    --hover: rgb(0, 0, 0);
    --main: rgb(0, 0, 0);
    --bg: #3D7590;
    --size: 99vmin;
    --ratio: 1 / 1.1;
    font-size: calc(var(--size) / 100);
    
  }




body{
    margin: 0;
    font-family: 'poppins',sans-serif;
   
}
*{
    box-sizing: border-box;
    margin: 0;
}
.container{
    max-width: 1140px;
    margin: auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
    z-index: 10;
}
 
.section-title{
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 40px;

}
.section-title h1{
    display: inline-block;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: 700;
    color: #000000;
    margin: 80px 0 5px;
    position: relative;
    
}
.section-title h1:before{
    content: '';
    left: 0;
    position: absolute;
    height: 2px;
    right: 32%;
    background-color: #febd01;
    bottom: 0px;
}
.text-center{
    text-align: center!important;
}
.text-right{
    text-align: right!important;
}
.portfolio{
    background-color: white;
    padding: 100px 7px;
}
.portfolio .section-title h1:before{
    left: 30%;
}
.portfolio .filter-buttons{
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.portfolio .filter-buttons ul{
    list-style: none;
    text-align: center;
    padding: 0;
}
.portfolio .filter-buttons ul li{
    color: #000000;
    font-weight: 500;
    font-size: 16px;
    display: inline-block;
    margin: 0px 8px;
    text-transform: uppercase;
    cursor: pointer;
    padding-bottom: 0px;
}
.portfolio .filter-buttons ul li.active{
    color: #febd01;
    border-bottom: 2px solid #febd01;
}
.portfolio .portfolio-gallery{
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.portfolio .portfolio-gallery .item{
    flex: 0 0 33.33%;
    max-width: 33.33%;
    position: relative;
    padding: 8px;
  
}
.portfolio .portfolio-gallery .item .inner{
    position: relative;
}
.portfolio .portfolio-gallery .item img{
    width: 100%;
    display: block;
}
 
@media(max-width:767px){
 
    .portfolio .portfolio-gallery .item{
        flex:0 0 50% ;
        max-width: 50%;
        position: relative;
        padding:8px ;
    }


 
}
@media(max-width:500px){
 
    .portfolio .portfolio-gallery .item{
        flex:0 0 100% ;
        max-width: 100%; }
}


ul.nav {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    
    
  }
  
  ul.nav li {

    float: left;
    position:relative;
  }
  
  ul.nav li a {
    transition: color 0.2s linear;
    font-size: 18px;
  }
  
  ul.nav li:hover a {
    color: #febd01;
  }
  
  ul.nav li a {
    padding: 21px;
    color: initial;
    text-decoration: initial;
  }
  .container2 {
    position: relative;
    width: 1170px;
    margin: 0 auto;
    color: #444;
    font-size: 14px;
    font-weight: 300;
    font-family: Roboto, 'Open Sans', Arial, sans-serif;
    overflow: hidden;

  }
  .header {
    line-height: 80px;
    width: 100%;
    transition: line-height 0.2s linear, box-shadow 0.2s linear;
    position: fixed;
    top: 0;
    left: 0%;
    z-index: 100;
    background: rgba(245, 245, 245, 0.97);
    z-index: 1;
    box-shadow:rgb(194, 194, 194) 2px 2px 2px;
  }


  svg{
    position: sticky;
    width: 200px;
    height: 80px;
    left: 0;
    top: 0px;
    z-index: 2;
  }

img{
    border: 2px solid black;
}

hr{

    margin-bottom: 25px;
}


footer .main-footer{  padding: 20px 0;  background: #252525;}
footer ul{  padding-left: 0;  list-style: none;}

/* Copy Right Footer */
.footer-copyright { background: #222; padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {  list-style: none; margin: 0;  padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block;  line-height: 12px;  margin: 0;  padding: 0 8px;}
.footer-copyright nav ul li a{  color: #969696;}
.footer-copyright nav ul li:first-child { border: medium none;  padding-left: 0;}
.footer-copyright p { color: #969696; margin: 2px 0 0;}

/* Footer Top */
.footer-top{  background: #252525;  padding-bottom: 30px; margin-bottom: 30px;  border-bottom: 3px solid #222;}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{  background: transparent;}
footer.transparent .footer-copyright{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}

/* Footer light */
footer.light .footer-top{ background: #f9f9f9;}
footer.light .main-footer{  background: #f9f9f9;}
footer.light .footer-copyright{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}

/* Footer 4 */
.footer- .logo {    display: inline-block;}

/*==================== 
  Widgets 
====================== */
.widget{  padding: 20px;  margin-bottom: 40px;}
.widget.widget-last{  margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent;  margin-bottom: 40px;
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{  margin-bottom: 18px;}
.widget li a{ color: #fff;}
.widget li a:hover{ color: #aaa;text-decoration: none;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right; background: #7f7f7f;}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{  color: #fff;}

ul.social-footer2 { margin: 0;padding: 0; width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {background-color:#ff8d1e;}
ul.social-footer2 li a {display: block; height:30px;width: 30px;text-align: center;}
.btn{background-color: #febd01; color:#fff;}
.btn:hover, .btn:focus, .btn.active {background: #4b92dc;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;

}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    background-color: #3e3e3e;
    color: #fff;
    padding: 9px;
    border-radius: 5px;
}

#subscribe-box .emailfield {
    margin: auto;
}

input[type="text"] {
    background: rgba(255,255,255,0.075);
    padding: 10px 15px;
    color: #aaa;
    border: 3px solid rgba(0,0,0,0.1);
    font-size: 14px;
    margin-bottom: 16px;
    border-radius: 5px;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    transition-delay: 0.2s;
    text-align: center;
    width: 100%;
}

input.submitbutton.ripplelink {
    background: #febd01;
    border: 3px solid rgba(0,0,0,0.1);
    color: #fff;
    border-color: #febd01;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2);
    transition-delay: 0s;
    width: 100%;
    font-size: 14px;
    /* font-weight: 700; */
    border: 0px solid;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    padding: 10px 15px;
    margin-bottom: 16px;
    border-radius: 5px;
}

.thumb-content ::before {
    content: "\f190";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left: 5px;
    color: white;
}

.words{

    background:rgba(245, 245, 245, 0.97);
    box-shadow:rgb(194, 194, 194) 2px 2px 2px;
}


.encausticwords{
    padding: 10px;
    text-align: center;
}

.encaustic{
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
}


.trans{
    animation: transitionIn 0.75s;

}



@keyframes transitionIn{
    from{
        opacity: 0;
        transform: rotateX(-10deg);


    }

    to {
        
        opacity: 1;
        transform: rotateX(0);

    }


}




form{
  width: 100%;
  height: 100%;
}








/* Add a black background color to the top navigation */


.header {
    line-height: 80px;
    width: 100%;
    transition: line-height 0.2s linear, box-shadow 0.2s linear;
    position: fixed;
    top: 0;
    left: 0%;
    z-index: 100;
    background: rgba(245, 245, 245, 0.97);
    z-index: 1;
    box-shadow:rgb(194, 194, 194) 2px 2px 2px;
  }





  /* Style the links inside the navigation bar */
  .topnav a {
    float: right;
    display: block;
    color: #444;
    text-align: center;
    padding-left:10px;
    padding-right: 30px;
    text-decoration: none;
    font-size: 17px;
    
  }
  

  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    color: #febd01;
    transition: color 0.2s linear;

  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
        
      display: block;
      width: 100%;
      text-align: left;
    }
  }

.home{
    font-weight: bold;
}
  



label{
  text-align: center;
  color: #444;
  font-size: 25px;
  font-family: 'Courier New', Courier, monospace;
  font-display:inherit;
}
.contact-form{
  width: 100%;
  clear: both;
  padding-left: 120px;
  padding-right: 120px;
}

.contact-form input{

  width: 100%;
  clear: both;
}

.sendbutton{
  display: block;
  width: 100%;
  border: none;
  background-color:#febd01;
  border-radius: 5px;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 210px;

}
.messagebutton{
  height: 100px;

}


.contacthead{
  padding-top: 50px;
  font-size: 35px;
  padding-bottom: 40px;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  color:#444;
}

h3{
  text-align: center;
}
.topnav.responsive .home {
  padding-top: 80px;
}