@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/harvest');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800');


body {
  background: #fff;
}

.main-width{
max-width: 100%;
overflow-x: hidden;
}

.ff1 {font-family: "Roboto", sans-serif; font-weight:lighter;}
.ff2 {font-family:"Calibri", Times, serif;}
.ff3 {font-family:"Century Gothic";}
.ff4 {font-family:"Times New Roman", Times, serif;}
.ff5 {font-family:"Harvest";}


.fs10 {font-size:10px;}
.fs11 {font-size:11px;}
.fs12 {font-size:12px;}
.fs14 {font-size:14px;}
.fs15 {font-size:15px;}
.fs16 {font-size:16px;}
.fs17 {font-size:17px;}
.fs18 {font-size:18px;}
.fs20 {font-size:20px;}
.fs22 {font-size:22px;}
.fs25 {font-size:25px;}
.fs28 {font-size:28px;}
.fs29 {font-size:29px;}
.fs30 {font-size:30px;}
.fs40 {font-size:40px;}
.fs50 {font-size:50px;}
.fs70 {font-size:70px;}
.fvw5 {font-size:5vw;}
.fvw4 {font-size:4vw;}
.fvw3 {font-size:3vw;}
.fvw2 {font-size:2vw;}
.fvw1 {font-size:1vw;}

.mo1{color:#888888;}
.mo1:hover{color:#0099FF; text-decoration:none;}

.mo2{color:#888888;}
.mo2:hover{color:#888888; text-decoration:underline;}

.mo3 {}
.mo3:hover{text-decoration:underline;}

.mo4{color:#999999;}
.mo4:hover{color:#FFFFFF; text-decoration:none;}

.mo5{color:#FFFFFF;}
.mo5:hover{color:#FFCC00; text-decoration:none;}

.mo6{color:#C3C3C3;}
.mo6:hover{color:#0099FF; text-decoration:none;}

.mo7{color:#444444; text-decoration:none;}
.mo7:hover{color:#0099FF; text-decoration:underline;}

.mo8{color:#FFFFFF; text-decoration:none;}
.mo8:hover{color:#FFCC00; text-decoration:none;}

.mo9{background-color:#333333;}
.mo9:hover{background-color:#222222;}

/************    CUSTOM Buttons     ********************/
/* 1 */
.btncustom1 {
  background-color: #333333;
  border: none;
  color: #CCCCCC;
  padding: 12px;
  font-size: 14px;
}

/* Darker background on mouse-over */
.btncustom1:hover {
  background-color: #222222;
  color:#FFFFFF;
}
/* END 1 */

/* 2 */
.btncustom2container {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.btncustom2center {
  width: 120px;
  height: 40px;
  position: absolute;
}

.btncustom2 {
  width: 120px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  border: 1px solid #91C9FF;
  outline: none;
  transition: 1s ease-in-out;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}

.btncustom2:hover {
  transition: 1s ease-in-out;
  background:#006699;
}

.btncustom2:hover svg {
  stroke-dashoffset: -480;
}

.btncustom2 span {
  color: white;
  font-size: 14px;
}
/* END 2 */

.shadow1 {
text-shadow: 0px 1px 2px #333333;
}
.shadow2 {
text-shadow: 0px 1px 0px #333333;
}


.fcblu {color:#0099CC;}
.fcwht {color:#FFFFFF;}
.fcash {color:#CCCCCC;}
.fccyn {color:#0099FF;}
.fcred {color:#FF0000;}
.fcred2 {color:#FF0033;}
.fcgrn {color:#00CC00;}
.fc333 {color:#333333;}
.fc444 {color:#444444;}
.fc888 {color:#888888;}
.fc818 {color:#818181;}
.fc999 {color:#999999;}
.fc000 {color:#000000;}
.fcorg {color:#FF6600;}
.fcylw {color:#FFCC00;}

.thin {font-weight:lighter;}

.lh1{line-height:150%;}
.lh2{line-height:100%;}
.lh3{line-height:125%;}
.lh4{line-height:200%;}
.ls1{letter-spacing:1px;}


.padding1
{
padding-left:10%;
padding-right:10%;
padding-top:7%;
padding-bottom:7%;
}

.padding2
{
padding-left:5%;
padding-right:5%;
padding-top:5%;
padding-bottom:5%;
}

.padding3
{
padding-top:4%;
padding-bottom:4%;
}

.padding4
{
padding-left:8%;
padding-right:8%;
}

.padding5
{
padding-left:7%;
padding-right:7%;
}

.top-left1 {
  position: absolute;
  top: 3%;
  left: 2%;
}

.top-left2 {
  position: absolute;
  top: 10%;
  left: 2%;
}

.top-right1 {
  position: absolute;
  top: 2%;
  right: 3%;
}

.top-right2 {
  position: absolute;
  top: 20%;
  right: 2%;
}


/******************* Parallax ******************/

body, html {
  margin: 0;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
  position: relative;
  /*  opacity: 0.65; */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image:url(../images/index_parallax5.jpg);
  min-height: 5%;
}

.bgimg-2 {
  background-image:url(../images/index_parallax6.jpg);
  min-height: 5%;
}

.bgimg-3 {
  background-image:url(../images/index_parallax7.jpg);
  min-height: 5%;
}

.bgimg-4 {
  background-image:url(../images/index_parallax1.jpg);
  min-height: 5%;
}

.bgimg-5 {
  background-image:url(../images/index_parallax2.jpg);
  min-height: 5%;
}

.bgimg-6 {
  background-image:url(../images/index_parallax3.jpg);
  min-height: 5%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #999999;
  color: #FFFFFF;
  padding: 20px;
  font-size: 40px;
  letter-spacing: 4px;
  opacity: 0.65;  
}


/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
    background-attachment: scroll;
  }
}

/******************* /Parallax ******************/


/******************* Slide in Overlay from the Bottom ******************/

.tom {
  position: relative;
  width: 100%;
}

.tomimage {
  display: block;
  width: 100%;
  height: auto;
}

.tomoverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#0099FF;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.tom:hover .tomoverlay {
  height: 100%;
  opacity: 0.9;
}

.texttom {
  color: white;
  font-size: medium;
  position: absolute;
  top: 35%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*******************  /Slide in Overlay from the Bottom  ******************/

/************     Scroll to Top      **********/

#btn-back-to-top {
  position: fixed;
  bottom: 120px;
  right: 0px;
  display: none;
  z-index:100;
   -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/******************************************************/


/************ Slider *******************/


/************ / Slider *******************/


/********** Product Zoom effect ****************/


/********** /Product Zoom effect ****************/