/*
Theme Name: Kozitas Theme
Theme URI: http://ifsolutions.lk/
Author: IF Solutions Team
Author URI: http://ifsolutions.lk/
Description: Kozitas Theme brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/






h1 , h2 , h3 , h4, h4 , h5, h6{
  font-family: 'Montserrat', sans-serif !important;
}

p{
  font-family: 'Nanum Gothic', sans-serif !important;
  color: #929292;
}

h1 {
  font-size: 5em !important;
  display: block !important;
  color: #000;
  /* text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);*/
}


/*nav scroll*/
.navbar{
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out
}

.navbar.activescroll{
  background-color:#fff!important;
}
/*.home .navbar .active li {
border-right: 1px solid #e2e2e2;
}*/

.navbar.activescroll a.nav-link {
  color: #77a54c!important;
}

/******/


.parallax {
  /* The image used */
  background-image: url("https://kozitas.com/wp-content/uploads/2018/12/5.png");

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.koz-tb-margin{
  margin-top: 30px !important;
  margin-bottom: 70px !important;
}

.h1-underline {
  border-bottom: 1px solid #28a74591;
}

/*home slider*/

.slider-wrapper-t{
  position: relative;
}

.cb-slideshowtest,
.cb-slideshowtest:after {
  position: relative;
  width: 100%;
  height: 100%;
  top: -30px;
  left: 10px;
  z-index: 0;
}
.cb-slideshowtest:after {
  content: '';
  background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshowtest li span {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimationTest 36s linear infinite 0s;
  -moz-animation: imageAnimationTest 36s linear infinite 0s;
  -o-animation: imageAnimationTest 36s linear infinite 0s;
  -ms-animation: imageAnimationTest 36s linear infinite 0s;
  animation: imageAnimationTest 36s linear infinite 0s;
}
.cb-slideshowtest li div {
  z-index: 1000;
  position: absolute;
  top: 70vh;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-animation: titleAnimationTest 36s linear infinite 0s;
  -moz-animation: titleAnimationTest 36s linear infinite 0s;
  -o-animation: titleAnimationTest 36s linear infinite 0s;
  -ms-animation: titleAnimationTest 36s linear infinite 0s;
  animation: titleAnimationTest 36s linear infinite 0s;
}
.cb-slideshowtest li div h3 {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: 130px;
  padding: 0 30px;
  line-height: 120px;
  color: rgba(255,255,255,0.8);
}
.cb-slideshowtest li:nth-child(1) span { background-image: url(../images/1.jpg) }
.cb-slideshowtest li:nth-child(2) span {
  background-image: url(../images/2.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.cb-slideshowtest li:nth-child(3) span {
  background-image: url(../images/3.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.cb-slideshowtest li:nth-child(4) span {
  background-image: url(../images/4.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.cb-slideshowtest li:nth-child(5) span {
  background-image: url(../images/5.jpg);
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.cb-slideshowtest li:nth-child(6) span {
  background-image: url(../images/6.jpg);
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}
.cb-slideshowtest li:nth-child(2) div {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.cb-slideshowtest li:nth-child(3) div {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.cb-slideshowtest li:nth-child(4) div {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.cb-slideshowtest li:nth-child(5) div {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.cb-slideshowtest li:nth-child(6) div {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}
@-webkit-keyframes imageAnimationTest {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-100%);
  }
  100% { opacity: 0 }
}
@-moz-keyframes imageAnimationTest {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -moz-transform: scale(1.1) translateY(-100%);
  }
  100% { opacity: 0 }
}
@-o-keyframes imageAnimationTest {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -o-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -o-transform: scale(1.1) translateY(-100%);
  }
  100% { opacity: 0 }
}
@keyframes imageAnimationTest {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -transform: scale(1.1) translateY(-100%);
  }
  100% { opacity: 0 }
}
@-webkit-keyframes titleAnimationTest {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@-moz-keyframes titleAnimationTest {
  0% {
    opacity: 0;
    -moz-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@-o-keyframes titleAnimationTest {
  0% {
    opacity: 0;
    -o-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -o-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -o-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -o-transform: translateY(100%);
  }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes titleAnimationTest {
  0% {
    opacity: 0;
    transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    transform: translateY(0%);
  }
  17% {
    opacity: 1;
    transform: translateY(0%);
  }
  19% {
    opacity: 0;
    transform: translateY(100%);
  }
  25% { opacity: 0 }
  100% { opacity: 0 }
}

h3.slider-titlen{
  font-size: 120px!important;
  color: #fff!important;
}


/*footer*/
#lab_social_icon_footer {

}

#lab_social_icon_footer a {
  color: #fff;
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  /* Browser Variations: */

  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
/*
Multicoloured Hover Variations
*/

#lab_social_icon_footer #social-fb:hover {
  color: #3B5998;
}

#lab_social_icon_footer #social-tw:hover {
  color: #4099FF;
}

#lab_social_icon_footer #social-gp:hover {
  color: #d34836;
}

#lab_social_icon_footer #social-em:hover {
  color: #f39c12;
}

@media screen and (max-width: 1140px) {
  .cb-slideshowtest li div h3 { font-size: 100px!important }
  h1{
    font-size:3em!important;
  }
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
  .cb-slideshowtest li div h3 { font-size: 35px!important }
  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(119, 165, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
  }
  .navbar-collapse {
    background-color: #77a54c;
    opacity: 0.6;
  }
  .navbar-dark .navbar-nav .nav-link {
    text-align: center;
  }
  ul.shopping-cart {
    position: absolute;
    top: 19px;
    right: 74px;
  }
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
  ul.shopping-cart {
    right: 115px;
  }
}


.product.add_to_cart_inline ins {
  text-decoration: none !important;
}


/*** Scroll button ***/
/* #sec1 {
padding-bottom: 6rem;
} */

.scroll-down {
  height: 50px;
  width: 30px;
  border: 2px solid black;
  position: absolute;
  left: 50%;
  /* bottom: 20px; */
  border-radius: 50px;
  cursor: pointer;
  top: 3%;
  z-index: 99;
}

.scroll-down::before,
.scroll-down::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 10px;
  width: 10px;
  transform: translate(-50%, -100%) rotate(45deg);
  border: 2px solid black;
  border-top: transparent;
  border-left: transparent;
  animation: scroll-down 1s ease-in-out infinite;
}

.scroll-down::before {
  top: 30%;
  animation-delay: 0.3s;
  /* animation: scroll-down 1s ease-in-out infinite; */
}

@keyframes scroll-down {
  0% {
    /* top:20%; */
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 90%;
    opacity: 0;
  }
}

@media (min-width: 576px) {
  .scroll-down {
    top: 8%;
  }
}

@media (min-width: 992px) {
  .scroll-down {
    top: 10%;
  }
}

@media (min-width: 1200px) {
  .scroll-down {
    top: 9%;
  }
}

@media (min-width: 1366px) {
  .scroll-down {
    top: 8%;
  }
}

@media (min-width: 1920px) {
  .scroll-down {
    top: 15%;
  }
}

@media (min-width: 2560px) {
  .scroll-down {
    top: 18%;
  }
}

@media (max-width: 575px) {
  .navbar .shopping-cart {
    padding-top: 15px !important;
  }
  .scroll-down {
    display: none !important;
  }
}