File: /home/dermova/public_html/superfood/css/style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
body{margin: 0px;padding: 0px;font-family: 'Roboto', sans-serif; }
@font-face {
font-family: 'cretypeCarosMedium';
src: url('../fonts/cretypeCarosMedium.eot');
src: url('../fonts/cretypeCarosMedium.eot') format('embedded-opentype'),
url('../fonts/cretypeCarosMedium.woff2') format('woff2'),
url('../fonts/cretypeCarosMedium.woff') format('woff'),
url('../fonts/cretypeCarosMedium.ttf') format('truetype'),
url('../fonts/cretypeCarosMedium.svg#cretypeCarosMedium') format('svg');
}
@font-face {
font-family: 'BisonBold300';
src: url('../fonts/BisonBold300.eot');
src: url('../fonts/BisonBold300.eot') format('embedded-opentype'),
url('../fonts/BisonBold300.woff2') format('woff2'),
url('../fonts/BisonBold300.woff') format('woff'),
url('../fonts/BisonBold300.ttf') format('truetype'),
url('../fonts/BisonBold300.svg#BisonBold300') format('svg');
}
.main{width: 88%; margin: 0px 6%; box-shadow:0px 0px 20px #cacaca; height: auto; padding:30px 0 0px 0; float: left;}
.header_tp{ max-width:888px; margin:0 auto; text-align:left;line-height: 64px;}
header{height: 60px;color: #fff; position:relative; top:20px; width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index:9999;}
header.sticky {position: fixed;height: 74px;width: 88%;top: 0px;background: #fff;margin: 0 6%;left: 0;box-shadow: 1px 2px 5px #fbfbfb;}
/*---navigation--*/
.header{width:100%; height:auto; position:relative; top:-41px; z-index:9999;}
.logo {width:20%; text-align:center; display:inline-block !important; position:relative; float:left;}
/*----------*/
.navigation{width: 100%; height: auto; margin: 0px;text-align: center; padding:0px 0px}
.navigation ul{width: 100%; height: auto; margin: 10px 0px 10px 0px; padding: 0px; text-align: center; list-style: none;}
.navigation ul li{width:auto; height: auto; margin: 0px; padding: 0px 10px; text-align: center; display: inline; border-right: solid 1px #111; text-transform: uppercase;font-family: 'cretypeCarosMedium'; letter-spacing: 2px;}
.navigation ul li a{color: #666; text-decoration: none;}
.navigation ul li:last-child{border: none;}
/*-----------*/
.line_heading{width: 100%; height: auto; float: left;}
.line_heading .img{width: 100%; height: auto; float: left;}
.line_heading .ling_bg{width: 100%; min-height: 150px; background: url("../images/line_bg.jpg"); height: auto; float: left;}
.line_heading .ling_bg h1{font-family:'BisonBold300';font-size: 70px;color: #fff;text-align: center;padding: 16px 0px 0px 0px;
text-transform: uppercase;letter-spacing: 0px;margin: 0px;}
.line_heading .ling_bg h3{width: 100%; font-family: 'cretypeCarosMedium'; font-size:14px; color: #fff; text-align: center; font-weight: normal;}
/*---------------*/
.dermoviva{width: 100%; height: auto; margin-top: 72px; position: relative; min-height: 700px;}
.dermoviva h1{ font-family: 'BisonBold300';font-size:70px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin: -15px 0px 0px 0px;font-weight: normal; }
.dermoviva h3{width: 100%; margin: 0px; padding: 0px; font-family: 'BisonBold300'; font-size:48px; color: #0d3529; text-align: center;}
.dermoviva p{width: 100%; margin: 20px 0px 20px 0px; padding: 0px 25%; font-family: 'cretypeCarosMedium'; font-size:14px; color: #666; text-align: center; font-weight: normal; line-height:32px;}
.dermoviva .termiric{width: auto; position: absolute; height: auto;left: -32px;top: 0;}
.dermoviva .fruit{width: auto; position: absolute; height: auto;right: -34px;top: 0;}
.dermoviva .pomegranate{width: auto; position: absolute; height: auto;left: 0px; bottom: -80px;}
.dermoviva .leaf{width: auto; position: absolute; height: auto;right: -20px; bottom: -120px;}
/*-------------*/
.super_selection{width: 100%; height: auto; margin-top: 72px; position: relative;}
.super_selection h1{ font-family: 'BisonBold300';font-size:50px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin:0px;font-weight: normal;}
.super_selection .images{width: 100%; height: auto; float: left; margin: 25px 0px; position: relative;}
.super_selection .images .txt {width: 100%; position: absolute; height: auto;top:120px;}
.super_selection .images .txt h2{font-family: 'BisonBold300';font-size: 50px;color: #fff;text-align: center;padding: 0px 0px 0px 0px;text-transform: uppercase;letter-spacing: 0px;margin: 0px;font-weight: normal;width: 100%;}
.super_selection .txt h4{font-family: 'cretypeCarosMedium';font-size: 22px;color: #fff;text-align: center;padding: 0px 22% 0px 22%;letter-spacing: 0px;margin: 0px;font-weight: normal; width: 100%;top: 140px;}
.super_selection .images .txt .button{width: auto; height: 44px;margin: 20px auto 0 auto;line-height: 44px; text-align: center;}
.super_selection .images .txt .button a{width: auto;border: solid 2px #fff;border-radius: 6px;text-align: center; font-size: 18px;color: #fff;margin: 20px auto 0 auto;max-width: 130px; text-decoration: none;padding: 6px 15px; transition: all ease .5s;}
.super_selection .images .txt .button a:hover{border: solid 2px #f28703; background: #f28703; transition: all ease .5s;}
/*--------*/
.natural_diet{width: 100%; height: auto; margin-top:20px; position: relative;}
.natural_diet h1{font-family: 'BisonBold300';font-size:60px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin:0px;font-weight: normal;}
.natural_diet h2{font-family: 'BisonBold300';font-size:44px;color: #0d3529;text-align: center;padding: 0px 22% 0px 22%;letter-spacing: 0px;margin: 0px;font-weight: normal; width: 100%;top: 140px;}
.natural_diet .inner{width:100%; height: auto; position: relative; float: left; margin: 60px 0% 0px 0%;}
.natural_diet .inner .left{width: 27%; height: auto; float: left; position:relative; margin-top: 20px;}
.natural_diet .inner .left ul{width: 100%; height: auto; margin: 0px; padding: 0px; list-style: none;}
.natural_diet .inner .left ul li{width: 100%; height: auto; margin: 0px 0px 20px 0px; padding: 20px 0px 0px 0px; list-style: none; text-align: left; font-family: 'cretypeCarosMedium';font-size:19px; float: left;color: #0d3529; }
.natural_diet .inner .left ul li .inner_dtl{width: 63%;float: right;line-height: 25px;padding-top:22px; }
.natural_diet .inner .left ul li span{width: 100%; height: auto; margin: 0px; padding:0px; list-style: none; text-align: left; font-family: 'cretypeCarosMedium';font-size:14px; float: left; font-weight: normal;}
.natural_diet .inner .left ul li img{width:100px; height: 100px; float: left; margin-right: 10px;}
.natural_diet .inner .middle{width: 46%; height: auto; float: left; position:relative; padding-top:0px; margin-top: -10px;}
.natural_diet .inner .right{width: 27%; height: auto; float: left; position:relative; margin-top: 20px; }
.natural_diet .inner .right ul{width: 100%; height: auto; margin: 0px; padding: 0px; list-style: none;}
.natural_diet .inner .right ul li{width: 100%; height: auto; margin: 0px 0px 20px 0px; padding: 20px 0px 0px 0px; list-style: none; text-align: right; font-family: 'cretypeCarosMedium';font-size:19px; float: left;color: #0d3529; }
.natural_diet .inner .right ul li .inner_dtl{width: 63%;float: left;line-height: 25px;padding-top: 22px;}
.natural_diet .inner .right ul li span{width: 100%; height: auto; margin: 0px; padding:0px; list-style: none; text-align: right; font-family: 'cretypeCarosMedium';font-size:14px; float: left; font-weight: normal;}
.natural_diet .inner .right ul li img{width:100px; height: 100px; float: right; margin-left:10px;}
/*-------------*/
.social_space{width: 100%; height: auto; margin-top:100px; position: relative;}
.social_space h1{ font-family: 'BisonBold300';font-size:50px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin:0px;font-weight: normal;}
.social_space .social_slider{width: 100%; min-height:280px; background: #E0E0E0; float: left; height: auto; margin-top: 50px; padding:45px;}
.social_space .social_slider .owl-nav button {position: absolute; top: 50%; background-color: #000; color: #fff; margin: 0; transition: all 0.3s ease-in-out;}
.social_space .social_slider .owl-nav button.owl-prev {left: -36px;}
.social_space .social_slider .owl-nav button.owl-next {right: -36px;}
.social_space .social_slider .owl-dots {text-align: center;padding-top: 15px; display: none;}
.social_space .social_slider .owl-dots button.owl-dot {width: 15px; height: 15px; border-radius: 50%; display: inline-block; background: #ccc; margin: 0 3px;}
.social_space .social_slider .owl-dots button.owl-dot.active {background-color: #000;}
.social_space .social_slider .owl-dots button.owl-dot:focus {outline: none;}
.social_space .social_slider .owl-nav button {position: absolute; top: 50%;transform: translateY(-50%); background:rgba(255, 255, 255, 0) !important;}
span {font-size: 70px; position: relative; top: -5px;}
.social_space .social_slider .owl-nav button:focus {outline: none;}
/*-------------*/
.social_space{width: 100%; height: auto; margin-top:100px; position: relative;}
.social_space h1{ font-family: 'BisonBold300';font-size:50px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin:0px;font-weight: normal;}
.social_space .social_slider{width: 100%; min-height:280px; background: #E0E0E0; float: left; height: auto; margin-top: 50px; padding:45px;}
.social_space .social_slider .owl-nav button {position: absolute; top: 50%; background-color: #000; color: #fff; margin: 0; transition: all 0.3s ease-in-out;}
.social_space .social_slider .owl-nav button.owl-prev {left: -36px;}
.social_space .social_slider .owl-nav button.owl-next {right: -36px;}
.social_space .social_slider .owl-dots {text-align: center;padding-top: 15px; display: none;}
.social_space .social_slider .owl-dots button.owl-dot {width: 15px; height: 15px; border-radius: 50%; display: inline-block; background: #ccc; margin: 0 3px;}
.social_space .social_slider .owl-dots button.owl-dot.active {background-color: #000;}
.social_space .social_slider .owl-dots button.owl-dot:focus {outline: none;}
.social_space .social_slider .owl-nav button {position: absolute; top: 50%;transform: translateY(-50%); background:rgba(255, 255, 255, 0) !important;}
span {font-size: 70px; position: relative; top: -5px;}
.social_space .social_slider .owl-nav button:focus {outline: none;}
/*--------*/
.sign_up{width: 100%; height: auto; margin-top:70px; position: relative;}
.sign_up h1{font-family: 'BisonBold300';font-size:60px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin:0px;font-weight: normal;}
.sign_up h2{font-family: 'BisonBold300';font-size:44px;color: #0d3529;text-align: center;padding: 0px 22% 0px 22%;letter-spacing: 0px;margin: 0px;font-weight: normal; width: 100%;top: 140px;margin-top: 25px;float: left;}
.sign_up .frm{width: 100%; min-height: 400px; background: #E0E0E0; float: left; height: auto; margin-top: 50px; padding:0px;}
.sign_up .frm .left{width:40%; float: left; height: auto; background: #fff; margin:5% 5%;padding: 35px 0px;}
.sign_up .frm .right{width:50%; float: right; height: auto;}
.sign_up .frm .left .form-control {display: block; width: 100%; padding: .375rem .75rem; font-size: 24px; font-weight: 400;
line-height: 2; color: #cacaca; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; text-align: center; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-bottom: 20px;}
.sign_up .frm .left .form-control::placeholder {color: #cacaca; opacity: 1;font-family: 'cretypeCarosMedium';font-size: 22px;}
.sign_up .frm .left .button {width: auto; height: 44px; margin: 20px auto 0 auto; line-height: 44px; text-align: center;font-family: 'BisonBold300';}
.sign_up .frm .left .button a {width: auto; border: solid 2px #cacaca; border-radius: 4px; text-align: center; font-size:30px;
color: #cacaca; margin:10px auto 0 auto; max-width: 130px; text-decoration: none; padding: 6px 25px; transition: all ease .5s;letter-spacing: 2px;}
.sign_up .frm .left a:hover {border: solid 2px #f28703; background: #f28703; transition: all ease .5s;}
/*--------*/
.contact{width: 100%; height: auto; margin-top:60px; position: relative;}
.contact h1{font-family: 'BisonBold300';font-size:60px;color: #0d3529;text-align: center;padding:0px 0px 0px 0px;text-transform: uppercase;letter-spacing:0px;margin:0px;font-weight: normal;}
.contact h2{font-family: 'BisonBold300';font-size:44px;color: #0d3529;text-align: center;padding: 0px 22% 0px 22%;letter-spacing: 0px;margin: 0px;font-weight: normal; width: 100%;top: 140px;}
.contact .address_lft{width: 50%; float: left; padding:3% 8%;font-family: 'cretypeCarosMedium';font-size:20px;color: #3f3f3f;}
.contact .address_rgt{width: 50%; float: left; padding:3% 8%;font-family: 'cretypeCarosMedium';font-size:20px;color: #3f3f3f;}
.selectpicker {
display: none;
}
.translate {
position: absolute;
top: 27px !important;
right: 30px;
top: 36px;
z-index: 986;
max-width: 240px;
display: inline-block;
}
.translate b {
background-color: #fff;
border: 1px solid #d2cfcf;
box-shadow: none;
padding: 5px 11px;
/* padding-right: 11px; */
border-radius: 31px;
background-image: url('../images/drop.png');
font-size: 13px;
padding-right: 24px;
background-repeat: no-repeat;
background-position: 92% 11px;
top: ;
background-size: 7px;
outline: none;
cursor: pointer;
font-weight: 300;
font-family: 'cretypeCarosMedium';
color: #666;
}
.translate ul {
background: #fff;
margin-top: 6px;
padding: 5px 5px 5px 22px;
display: none; max-width: 151px;
}
.translate ul li {
list-style: none;
}
.translate ul li a {
list-style: none;
color: #333;
font-size: 15px; text-decoration: none; font-weight: 300;
font-family: 'cretypeCarosMedium';
color: #666;
}