/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575px) {



  .parallax-1{

    height: 900px!important;

  }

  #logo {
  width: 70px;
  height: auto;

  }

  #nav.shrink {

  }

  #nav.shrink #logo {

  }


}



/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767px) {



  .parallax-1{

    height: 700px!important;

  }

  #logo {
  width: 70px;
  height: auto;

  }

  #nav.shrink {

  }

  #nav.shrink #logo {

  }



}



/* Medium devices (tablets, 768px and up)  */

@media (min-width: 768px) and (max-width: 991px) {



  .parallax-1{

    height: 600px!important;

  }

  #logo {
  width: 70px;
  height: auto;

  }

  #nav.shrink {

  }

  #nav.shrink #logo {

  }



  .brand { 

  -webkit-transition: all .2s ease-in-out;

  -moz-transition: all .2s ease-in-out; 

  -o-transition: all .2s ease-in-out; 

  transition: all .2s ease-in-out; 

}

.brand:hover { 



  -webkit-transform: scale(1.1); 

  -moz-transform: scale(1.1); 

  -o-transform: scale(1.1); 

  transform: scale(1.1); 

}



}



@media (min-width: 992px){



  /* NAVBAR EFFECTS  */

  #nav {



    background: transparent;

    height: 100px;

    transition: all ease .5s;

  }



  #logo {
    width: 100px;
    height: auto;
    transition: all ease .5s;

  }





  #nav.shrink {

    height: 75px;

    transition: all ease .5s;

    background: rgba(31,33,36,0.95);

  }



  #nav.shrink #logo {
    width: 70px;
    height: auto;
    padding-top: 2px;

    padding-bottom: 2px;

    transition: all ease .5s;

  }



  .fixed-text {

    font-size: 25px!important;

}



.brand { 

  -webkit-transition: all .2s ease-in-out;

  -moz-transition: all .2s ease-in-out; 

  -o-transition: all .2s ease-in-out; 

  transition: all .2s ease-in-out; 

}

.brand:hover { 



  -webkit-transform: scale(1.1); 

  -moz-transform: scale(1.1); 

  -o-transform: scale(1.1); 

  transform: scale(1.1); 

}



}



/* Large devices (desktops, 992px and up)  */

@media (min-width: 992px) and (max-width: 1199px) {

  .parallax-1{

    height: 40vh!important;

  }

  .fixed-text {

    font-size: 25px!important;

}



}



/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {

  .parallax-1{

    height: 450px!important;

  }



  .fixed-text {

    color: #fff;

    font-size: 25px!important;

}



.brand { 

  -webkit-transition: all .2s ease-in-out;

  -moz-transition: all .2s ease-in-out; 

  -o-transition: all .2s ease-in-out; 

  transition: all .2s ease-in-out; 

}

.brand:hover { 



  -webkit-transform: scale(1.1); 

  -moz-transform: scale(1.1); 

  -o-transform: scale(1.1); 

  transform: scale(1.1); 

}



}





/* VIEWPORT CHECKER*/

.hidden-o{

     opacity:0;

}

.visible-o{

     opacity:1;

}





@font-face {

    font-family: 'False-Positive-Round-BRK';

    src:url('http://localhost:8080/spectrafze2/assets/font/False-Positive-Round-BRK.ttf.woff') format('woff'),

        url('http://localhost:8080/spectrafze2/assets/font/False-Positive-Round-BRK.ttf.svg#False-Positive-Round-BRK') format('svg'),

        url('http://localhost:8080/spectrafze2/assets/font/False-Positive-Round-BRK.ttf.eot'),

        url('http://localhost:8080/spectrafze2/assets/font/False-Positive-Round-BRK.ttf.eot?#iefix') format('embedded-opentype'); 

    font-weight: normal;

    font-style: normal;



}





body {

	font-family: 'Raleway', sans-serif;

	font-weight: 500;

	-webkit-font-smoothing: antialiased !important;

	color: #606060;

}



.dark {

	padding-top: 6em;

	padding-bottom: 5em;

	background-color: #2a2f33;

}



.plain {

	background-color: #fcfcfc;

	padding-top: 6em;

	padding-bottom: 5em;

}



.white {

	padding-top: 6em;

	padding-bottom: 5em;

}



.grey {

	background-color: #f3f3f3;

	padding-top: 6em;

	padding-bottom: 5em;

}



/* NAVBAR START */



#navbarSupportedContent {

  margin-top: 10px;

}



#nav-icon3 {

  width: 35px;

  height: 20px;

  position: relative;

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -o-transform: rotate(0deg);

  transform: rotate(0deg);

  -webkit-transition: .5s ease-in-out;

  -moz-transition: .5s ease-in-out;

  -o-transition: .5s ease-in-out;

  transition: .5s ease-in-out;

  cursor: pointer;

}



#nav-icon3 span {

  display: block;

  position: absolute;

  height: 2.5px;

  width: 100%;

  background: #b41032;

  border-radius: 9px;

  opacity: 1;

  left: 0;

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -o-transform: rotate(0deg);

  transform: rotate(0deg);

  -webkit-transition: .25s ease-in-out;

  -moz-transition: .25s ease-in-out;

  -o-transition: .25s ease-in-out;

  transition: .25s ease-in-out;

}





#nav-icon3 span:nth-child(1) {

  top: 0px;

}



#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {

  top: 9px;

}



#nav-icon3 span:nth-child(4) {

  top: 18px;

}



#nav-icon3.open span:nth-child(1) {

  top: 10px;

  width: 0%;

  left: 50%;

}



#nav-icon3.open span:nth-child(2) {

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}



#nav-icon3.open span:nth-child(3) {

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

}



#nav-icon3.open span:nth-child(4) {

  top: 10px;

  width: 0%;

  left: 50%;

}



.navbar-brand {

  font-size: 2rem;

}



.navbar-dark .navbar-brand {

	color: #b41032;

	font-family: 'False-Positive-Round-BRK';

}

.navbar-dark .navbar-brand:hover {

	color: #b41032;

}

.navbar-dark .navbar-brand:active {

	color: #b41032;

}



.navbar-nav > li > a{

	font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    

}



.navbar-dark .navbar-nav .nav-link {

	color: #f0f0f0;

}



.navbar-dark .navbar-nav .nav-link:hover {

	color: #b41032;

	-webkit-transition: background-color 2s ease-out;

	-moz-transition: background-color 2s ease-out;

	-o-transition: background-color 2s ease-out;

	transition: all 0.5s ease 0s;

}



.bg-customize {

	background: rgba(31,33,36,0.95);

}











/* CAROUSEL START */



.carousel.fade {

     opacity: 1;

}

.carousel.fade .carousel-item {

    

    -webkit-transition: opacity ease-out .7s;

    -moz-transition: opacity ease-out .7s;

    -o-transition: opacity ease-out .7s;

    transition: opacity ease-out .7s;

  



    left: 0;

    opacity: 0; /* hide all slides */

    top: 0;

    position: absolute;

    width: 100%;

    display: block;

}

.carousel.fade .carousel-item:first-child {

    top: auto;

    opacity: 1; /* show first slide */

    position: relative;

}

.carousel.fade .carousel-item.active {

    opacity: 1;

}







.parallax-layer{

  background-color: rgba(0, 0, 0, 0.5);

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;



}



#layer{

	position: absolute;

	top: 38vh;

	background-color:rgba(0,0,0,0);

	width: 100%;

    z-index:5;

}



.top-div{

	margin: 0px;

}



.fixed-text{

	color:#fff;

	font-size: 20px;

}



.fixed-text strong{

	font-weight: 900;;

}





.slider-1 {

	/* The image used */

    background-image: url("../../assets/img/banner/earphone.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

  	padding-left: 0px;

}

.slider-2 {

	/* The image used */

    background-image: url("../../assets/img/banner/phone.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

  	padding-left: 0px;

}



.slider-3{

	/* The image used */

    background-image: url("../../assets/img/banner/watch.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

  	padding-left: 0px;

}



.slider-4{

  /* The image used */

    background-image: url("../../assets/img/banner/iluv.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-5{

  /* The image used */

    background-image: url("../../assets/img/banner/gramas.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-6{

  /* The image used */

    background-image: url("../../assets/img/banner/seagate.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-7{

  /* The image used */

    background-image: url("../../assets/img/banner/lenovo.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-8{

  /* The image used */

    background-image: url("../../assets/img/banner/kef.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-9{

  /* The image used */

    background-image: url("../../assets/img/banner/promate.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-10{

  /* The image used */

    background-image: url("../../assets/img/banner/uag.png");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}



.slider-11{

  /* The image used */

    background-image: url("../../assets/img/banner/ipearl.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

    padding-left: 0px;

}





/* ABOUT START */



.white-title {

    font-size: 40px;

    margin-bottom: 30px;

    text-transform: none;

    color: #FFF;

}



.white-title > strong {

	font-weight: 900;

}





.white-content p{

	color: #FFF;

}

.white-content h4{

	color: #FFF;

}



.black-title {

    font-size: 40px;

    margin-bottom: 30px;

    text-transform: none;

    color: #404040;

}



.black-title > strong {

	font-weight: 900;

}





/* 1ST PARALLAX START */

.parallax-1 {



	/* The image used */

    background-image: url("../../assets/img/mission-vision.jpg");



    /* Set a specific height */

    height: 60vh; 



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

  	padding-left: 0px;

}



.parallax-layer-1{

  background-color: rgba(255, 255, 255, 0.6);

  height: 100vh;

  width: auto;

  margin-left: 0px;

  margin-right: 0px;

}





/* WHERE TO BUY */





.buy-bg {



	/* The image used */

    background-image: url("../../assets/img/dutyfree.jpg");



    /* Set a specific height */

    height: 100vh; 



    /* Create the parallax scrolling effect */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-right: 0px;

  	padding-left: 0px;

}







.dark-footer {

	padding: 30px 0px;

	background-color: #262b2f;

}



.white-content-footer {

	margin-top: 1rem;

	margin-bottom: 1rem;

	color: #fff;

}



/* BRAND */



.img-thumbnail {

    border: 2px solid #e1e1e1;

    border-radius: 0px;

}



.brand-padding{

  margin: 10px 0px;

}



/* SLIDER */



.owl-nav > div {

  margin-top: -26px;

  position: absolute;

  top: 45%;

  color: #fff;

}

.owl-nav .owl-prev {

  left: -5px;

  opacity: 0 !important;

}



.owl-nav .owl-next {

  right: -5px;

  opacity: 0 !important;

}



.owl-picture:hover .owl-prev {

  opacity: 1 !important;

  -webkit-transition: all 200ms ease-in;

  -moz-transition: all 200ms ease-in;

  -o-transition: all 200ms ease-in;

}

.owl-picture:hover .owl-next {

  opacity: 1 !important;

  -webkit-transition: all 200ms ease-in;

  -moz-transition: all 200ms ease-in;

  -o-transition: all 200ms ease-in;

}



.owl-picture .owl-nav [class*=owl-] {

    padding: 10px;

    font-size: 20px;

    background: rgba(31,33,36,0.75);

    border-radius: 0px;

    margin: 5px;

}



.owl-picture .owl-next:hover {

  background: rgba(31,33,36,0.95)!important;

}

.owl-picture .owl-prev:hover {

  background: rgba(31,33,36,0.95)!important;

}



.oi {

    top: 3px;

    right: 2px;

    left: 2px;

}



.nb {

  border: 0px;

  padding: 0px;

}





div.effect-bubba {

  background: #313336;

}



div.effect-bubba:hover img {

  opacity: 0.5;

}



div.effect-bubba div::before,

div.effect-bubba div::after {

  position: absolute;

  top: 15px;

  right: 15px;

  bottom: 15px;

  left: 15px;

  content: '';

  opacity: 0;

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  -moz-transition: opacity 0.35s, -moz-transform 0.35s;

  -o-transition: opacity 0.35s, -o-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

}



div.effect-bubba div::before {

  border-top: 1px solid #fff;

  border-bottom: 1px solid #fff;

  -webkit-transform: scale(0,1);

  transform: scale(0,1);

}



div.effect-bubba div::after {

  border-right: 1px solid #fff;

  border-left: 1px solid #fff;

  -webkit-transform: scale(1,0);

  -moz-transform: scale(1,0);

  -o-transform: scale(1,0);

  transform: scale(1,0);

}







div.effect-bubba:hover div::before,

div.effect-bubba:hover div::after {

  opacity: 1;

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

}





.owl-brand .owl-nav > div {

  margin-top: -26px;

  position: absolute;

  top: 45%;

  color: #fff;

}

.owl-brand >.owl-nav .owl-prev {

  opacity: 1 !important;

}



.owl-brand >.owl-nav .owl-next {

  opacity: 1 !important;

}