html {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
overflow-y: auto;
overflow-x: hidden;
font-family: 'Lato', sans-serif;
color: #dd0A77;
}
::-webkit-scrollbar { width: 4px; }/* for vertical scrollbars */
::-webkit-scrollbar-track { background: grey }
::-webkit-scrollbar-thumb { background: rgba(221, 10, 119, 0.9); }
body {
margin: 0;
padding: 0;
opacity: 1;
transition: 10s opacity;
}
}
.site-content {
height: auto;
}
#wrapper {
overflow: auto;
width: 100%;
height: 100%;
position: relative;
}
#wrapper1 {
overflow: auto;
width: 100%;
height: 70%;
position: relative;
}
#wrapper5 {
overflow: auto;
width: 100%;
height: 0%;
position: relative;
}
img {
border-style: none;
}
#strana {
background:white;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#logo {
position: absolute;
top: -10%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
#logo img {
width: inherit;
//for ie8 width: 100%;
max-width: 100%;
height: auto;
}
a {
color: black;
}
a:hover {
color: #CECACB;
}
#nav {
width: 0px;
z-index: 1;
float: right;
position: fixed;
right: 0;
top: 0;
background: #191919;
height: 100%;
text-align: left;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 0 0 8px 2px rgba(147, 147, 147, 0.8);
}
#nav p {
border-bottom: 5px solid black;
width: 30px;
margin-bottom: 0;
}
#nav ul {
list-style: none;
margin-top: 60px;
}
#nav li {
float: left;
display: block;
padding: 18px 0;
clear: both;
}
#nav li a {
color: #6c6c6c;
font-size: 20px;
line-height: 1.9em;
font-weight:500;
text-decoration: none;
width: 20px;
padding: 0px 0;
}
#nav li a.active {
color: #fff;
}
#nav li a:hover {
color: #dd127b;
border-bottom:3px solid #dd127b;
transition:0.5s;
}
#nav-kontakt {
width: 100%;
z-index: 20;
float: right;
position: fixed;
right: 0;
top: 0;
height: 100%;
text-align: left;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#nav-kontakt p {
border-bottom: 5px solid black;
width: 30px;
margin-bottom: 0;
}
#nav-kontakt ul {
list-style: none;
margin-top: 60px;
}
#nav-kontakt li {
float: left;
display: block;
padding: 30px 0;
clear: both;
text-transform: lowercase;
}
#nav-kontakt li a {
color: #fff;
font-size: 15px;
line-height: 1.9em;
text-decoration: none;
width: 20px;
padding: 6px 0;
}
#nav-kontakt li a.active {
color: #000;
}
#nav-kontakt li a:hover {
color: #CECACB;
}
#kontakt-menu {
position: absolute;
top: 15%;
right: 20%;
width: 45%;
min-width: 300px;
height: 590px;
background: white;
z-index: 999;
}
.kontakt-inside {
padding: 40px 70px;
background: white;
z-index: 999;
height: 510px;
font-size: 0.9em;
}
.nadpis-kontakt {
text-transform: lowercase;
color: black;
font-size: 2.6em;
line-height: 1.9em;
display: box;
clear: both;
font-weight: 600;
margin: 40px 0;
}
#nav-pod {
width: 140px;
z-index: 999;
float: right;
position: fixed;
right: 0;
top: 0;
background: white;
height: 100%;
text-align: left;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#nav-pod p {
border-bottom: 5px solid black;
width: 30px;
margin-bottom: 0;
}
#nav-pod ul {
list-style: none;
margin-top: 60px;
}
#nav-pod li {
float: left;
display: block;
padding: 25px 0;
clear: both;
text-transform: lowercase;
}
#nav-pod li a {
color: #000;
font-size: 15px;
line-height: 1.9em;
text-decoration: none;
width: 20px;
padding: 6px 0;
}
#nav-pod li a.active {
color: #fff;
}
#nav-pod li a:hover {
color: #CECACB;
}
#nav-dole {
position: fixed;
display: none;
bottom: 0px;
z-index: 9999;
background: white;
padding: 20px;
width: 100%;
margin: 0 auto;
}
#nav-dole ul {
margin: 0;
width: 100%;
list-style: none;
text-align: center;
display: block !important;
margin-left: -55px;
}
#nav-dole li {
text-decoration: none;
margin: 0;
width: 20%;
float: left;
clear: right;
text-transform: lowercase;
}
#nav-dole li a {
color: #000;
font-size: 15px;
text-decoration: none;
padding: 10px 0;
width: 50px;
display: box;
}
#nav-dole li a:hover {
color: #CECACB;
}
.logo-menu img {
width: 70px;
margin-left: -5px;
position: absolute;
top: 80%;
height: 70px;
}
#nav-top {
position: absolute;
top: 94%;
width: 90%;
margin: auto;
left: 0;
bottom: 0;
right: 0;
}
#nav-top ul {
margin: 0;
width: 100%;
list-style: none;
text-align: center;
display: block !important;
margin-left: -40px;
}
#nav-top li {
text-decoration: none;
margin: 0;
width: 20%;
float: left;
clear: right;
text-transform: lowercase;
}
#text_slow h1 {
font-size: 1.4em;
line-height: 0.4em;
}
#text_slow h1 a {
color:white;text-decoration:none;
}
#text_slow {
position: absolute;
top: 32%;
max-width: 400px;
margin: 0 auto;
padding: 90px 20px;
;
text-align: left;
position: relative;
text-align: center;
}
#text_slow1 {
top: 50%;
max-width: 400px;
margin: 0 auto;
padding: 90px 20px;
text-align: left;
position: relative;
text-align: center;
}
#text_slow_text {
max-width: 400px;
margin: 0 auto;
position: relative;
font-size: 1.4em;
margin-top: -20px;
}
#nav-top li a {
color: #fff;
font-size: 19px;
text-decoration: none;
padding: 8px 0;
font-family: 'Futura W02 Medium';
width: 50px;
display: box;
}
#nav-top li a.active {
color: #fff;
}
#nav-top li a:hover {
color: #CECACB;
}
/* blockquote:after {
font-size: 5em;
content: close-quote;
float: right;
}
blockquote:before {
content: open-quote;
font-size: 5em;
float: left;
}
blockquote p {
display: inline;
}
*/
#social {
position: absolute;
top: 5%;
height: 220px;
overflow: hidden;
width: 100px;
right: 0;
color: white;
font-size: 14px;
}
#social ul {
list-style: none;
display: inline;
}
#social a {
color: white;
text-decoration: none;
}
.button a {
color: white;
}
.skryti {
width: 100px;
height: 200px;
margin-top: 20px;
overflow: hidden;
position: relative;
}
.cbp-spmenu-horizontal li {
clear: both;
}
.cbp-spmenu-horizontal {
width: 100px;
/*height: 150px;
*/
right: 0;
z-index: 00;
position: absolute;
}
.cbp-spmenu, .cbp-spmenu-push {
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cbp-spmenu-top {
top: 00px;
/*display: none;
*/
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0px;
}
.datum-news {
line-height: 2.6em;
float: left;
width: 95px;
font-size: 22px;
}
.entry-content {
margin-left: 100px;
margin-top: 40px;
line-height: 1.6em;
max-width: 500px;
font-size: 13px;
position: relative;
display: box;
}
.entry-content-sirsi {
line-height: 1.6em;
margin-top: 40px;
max-width: 500px;
font-size: 13px;
position: relative;
margin-bottom: 30px;
}
.entry-content-sirsi img {
margin: 5px 0;
width: 130%;
height: auto;
}
.entry-title {
padding: 5px 0;
line-height: 2.8em;
font-size: 22px;
color: black;
text-decoration: none;
text-transform: uppercase;
}
.entry-title a {
padding: 7px 0;
line-height: 2.8em;
font-size: 22px;
color: black;
text-decoration: none;
text-transform: uppercase;
}
.entry-title a:hover {
color: #CECACB;
}
.entry-content img {
margin: 5px 0;
width: 130%;
height: auto;
}
.levo-sub {
float: left;
max-width: 25%;
min-width: 200px;
}
.levo-sub-menu {
margin-top: 130px;
}
.levo-sub ul {
list-style: none;
display: inline;
}
.levo-sub ul li {
line-height: 1.7em;
display: block;float:left;text-align:left; clear:left;
}
.levo-sub ul li a {
color: black;
text-decoration: none;
}
.levo-sub ul li a:hover {
color: #CECACB;
}
.l-vnitrek-sub {
padding: 15px 15px;
box-sizing: border-box;
}
.p-vnitrek-sub {
padding: 40px 00px;
box-sizing: border-box;
}
.l-vnitrek p {
font-size: 1em;
}
.pravo-sub {
float: left;
margin-right: 140px;
position: relative;
}
.nadpis-kategorie {
font-family: 'Futura W02 Medium';
float: left;
text-transform: lowercase;
color: black;
font-size: 2.3em;
line-height: 1.5em;
display: box;
clear: both;
font-weight: bold;
margin: 40px 0;
}
.content-single {
margin-top: -10px;
}
.sekce {
max-width: 1100px;
margin: 0 auto;
position: relative;
margin-bottom: 50px;
margin-top: 0px;
}
articles {
position: relative;
margin-bottom: 60px;
}
.browsehappy {
width: 100%;
position: relative;
height: 600px;
background: grey;
}
/*= SLIDES STYLING--------------------------------------------------------*/
.levo {
float: left;
width: 49%;
background: white;
}
.l-vnitrek {
padding: 50px;
float: right;
}
.texty {
font-size: 0.9em;
line-height: 1.4em;
max-width: 450px;
}
.p-vnitrek {
padding: 50px;
float: left;
}
.pravo {
float: right;
width: 49%;
background: white;
}
.nadpis-clanek {
font-size: 1.8em;
line-height: 1.3em;
font-weight: 600;
line-height: 2em;
}
.nadpis {
font-size: 1.5em;
font-weight: 600;
line-height: 5em;
}
.cislo {
font-family: 'Futura W02 Medium', sans-serif;
font-weight: bold;
text-transform: lowercase;
color: #dd127b;
font-size: 3.6em;
line-height: 1.6em;
margin-top: 40px;
}
.cislo a {
color: black;
}
.fotky-pravo {
position: relative;
float: right;
width: 51%;
height: 100%;
height: 100%;
background-position: fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height: -moz-calc(100% - (0px + 0px));
height: -webkit-calc(100% - (0px + 0px));
height: calc(100% - (0px + 0px));
display: block;
}
.fotky-levo {
position: relative;
float: left;
width: 51%;
height: 100%;
height: 100%;
background-position: fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height: -moz-calc(100% - (0px + 0px));
height: -webkit-calc(100% - (0px + 0px));
height: calc(100% - (0px + 0px));
display: block;
}
.podobrazek {
position: fixed;
z-index: -99;
width: 100%;
height: 100%;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.slider {
width: 100%;
height: 1100px;
clear: both;
background: white;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
#slide3 {
color: #fff;
height: 1100px;
width: 100%;
clear: both;
position: relative;
overflow: hidden;
background: url('img/forest.jpg') center center no-repeat;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
/*SHOP*********************************************************/
.shop {
max-width: 900px;
padding: 20px;
overflow: hidden;
box-sizing:border-box;
}
.leftos { margin-right:140px;}
.single-shop {max-width:1100px;}
.shop h1 {
position:relative;
padding:10px 0;
width:auto;
text-transform:uppercase;
font-family: "Futura W02 Medium";
display:block;
margin:0 auto;
left:50%;
margin-left:-110px;
}
.gallery {
width: 100%;
}
.grid-sizer, .item-shop {
width: 49%;
width: -webkit-calc(50% - 5px); /** Safari 6, Chrome 19-25 **/
width: -moz-calc(50% - 5px); /** FF 4-15 **/
width: calc(50% - 5px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
}
.item-shop {
display:block;
float: left;
height:auto;
margin-bottom: 10px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.item-shop:last-of-type, .item-shop:nth-last-of-type(2) {
margin-bottom:10px;
}
.item-shop img {
display: block;
width: 100%;
height:auto;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
transform-style: preserve-3d;
background:white;
}
.item-shop:hover img {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.item-overlay {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #bcb4af;
overflow: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.item-shop:hover > .item-overlay {
opacity: 1;
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
display: block;
z-index:99999 !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
transform-style: preserve-3d;
}
.overlay-entry {width:200px;right:50%;height:200px;top:45%;margin-top:-100px;position:absolute;margin-right:-100px;text-align:center;}
.overlay-entry h2 {text-transform:uppercase;width:100%;color:black;float:left;font-size:1.3em;font-weight:bold;color:white;text-align:center;}
.overlay-entry span {width:100%;color:black;font-size:1.2em;font-weight:bold;float:left;color:white;text-align:center;}
.overlay-entry a {width:100%;color:black;float:left;margin-top:20px;font-size:1.0em;text-decoration:none;color:white;text-align:center;}
.overlay-entry hr {margin:0 auto;border:1px solid white;width:20px;margin-top:0px;padding:0;margin-bottom:40px;}
.shop-left {width:55%;float:left;min-height:200px;}
.shop-left img {width:100%;float:left;height:auto;}
.shop-right {width:40%;float:right;min-height:200px;}
.shop-entry {width:100%;}
.shop-entry .price {float:left;font-size:1.5em;font-weight:bold;line-height:4em;clear:both;}
.shop-entry .material {float:left;clear:both;}
.shop-entry .size {float:left;clear:both;}
.shop-entry .colour {float:left;clear:both;}
.shop-entry .description {float:left;clear:both;}
.enquire {float:left;border:2px solid black;padding:15px 0;text-align:center;width:27.5%;color:black;font-size:1.2em;margin-top:30px;
box-sizing:border-box;text-decoration:none;margin-left:13.75%;margin-bottom:50px;}
.shop-entry h2 { no-repeat;padding:10px 0;}
.shop-table {
vertical-align: top;font-size:0.9em;
}
.icon .hamburger {
display:none;
}
.menu-mobile ul {
display:none;
}
.icon .hamburger {
width: 30px;
height: 6px;
border-top:2px solid black;
display:block;
margin:0 auto;
}
.menu-mobile {height:100%;float:left;width:100%;}
.menu-mobile ul {
list-style: none;
width: 100%;box-sizing:border-box;
margin:0;
padding: 0;
display:block;
}
.menu-mobile ul a {
color: #999;
text-decoration: none;
}
.menu-mobile li a {
text-align: center;
padding: 10px 0;
display:block;
border-bottom: 1px solid #999;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.menu-mobile li a:hover {
background-color: #999;
color: white;
}
}
@media screen and (min-width:100px) and (max-width:500px){
.icon {
cursor: pointer;
padding: 20px;
width:100%; box-sizing:border-box; background:lightgrey;
}
.icon .hamburger {
width: 30px;
height: 6px;
border-top:2px solid black;
display:block;
margin:0 auto;
}
.
.shop {width:100%;margin-right:0;}
.grid-sizer, .item-shop {
width: calc(100% - 5px);
}
.shop-left {width:100%;}
.shop-right {width:100%;}
.enquire {float:left;border:2px solid black;padding:15px 0;text-align:center;width:100%;color:black;font-size:1.2em;margin-top:30px;
box-sizing:border-box;text-decoration:none;margin-left:0%;margin-bottom:50px;}
html,body{margin:0;padding:0;border:0;}
body{word-wrap:break-word;-webkit-text-size-adjust:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
table{width:auto;border-collapse:collapse;border-spacing:0;}
.cara{display:none;}
#nav{display:none;width:0px;}
#strana{margin-right:0;width:100%;background:white;}
.fotky-pravo{width:100%;}
.fotky-levo{width:100%;}
.levo{width:90%;padding:0px;clear:both;margin:0px;background:white;}
.pravo{width:90%;padding:0px;clear:both;margin:0px;float:left;background:white;}
.texty{font-size:0.9em;padding:0px;margin:10px;width:100%;background:white;padding-right:10px;}
#strana{margin-right:0;width:100%;background:white;}
#nav{display:none;width:0px;}
#nav-top li a{color:#fff;font-size:20px;text-decoration:none;display:box;}
.nadpis{font-size:1.7em;line-height:2.8em;font-weight:600;width:100%;margin-left:5px;}
.cislo{color:black;font-size:3em;display:box;margin-left:5px;font-weight:600;}
#slide3{}
#nav-kontakt{display:none;}
.entry-content{margin-left:0px;}
#nav-pod{display:none;}
#kontakt-menu{width:100%;position:relative;left:0;right:0;margin-right:0;}
.kontakt-inside{padding:20px;}
#sekce{width:100%;}
.levo-sub{clear:both;width:80%;}
.l-vnitrek-sub{padding:15px;}
.l-vnitrek{padding:0px;margin:0;float:left;}
.pravo-sub{float:left;width:100%;}
.p-vnitrek{padding:0px;margin:0;}
.p-vnitrek-sub{width:100%;padding:15px;}
#odsazeni-portfolio{margin-left:0px;}
#social-dole{text-align:left;margin-left:30px;}
#paticka-pravo{max-width:60%;}
#paticka-stred{width:100%;margin-bottom:40px;font-size:1.5em;}
#nav-dole{position:fixed;display:inline;}
.polozka{width:100%;clear:both;}
.slider{height:600px;}
.entry-content-sirsi img{margin:5px 0;width:100%;height:auto;}
.entry-content img{margin:5px 0;width:100%;height:auto;}
#logo {
position: absolute;
top: -10%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 180px;
height: 180px;
}
#logo img {
width: inherit;
//for ie8 width: 100%;
max-width: 100%;
height: auto;
}
}
#nav-port {
float: left;
clear:both;
list-style:none;
margin:0;
padding:0;
font-size:14px;
}
#nav-port li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #000;
margin-top:15px;
padding:5px 0;
}
#nav-port li a:hover, #nav li a.active {
color: #000;
}
#nav-port li ul {
display: none; // used to hide sub-menus
margin:0;padding:0;
}
#nav-port li ul li { list-style:none;margin:0;padding:0;}
#nav-port li ul li a {
padding: 3px 5px;
background: none;
margin-top:0px;
max-width:150px;
font-size:90%;
}
/*Language*/
.active-menu {font-weight:bold;font-size:110%; font-family: 'Futura W02 Medium', sans-serif;}
#language-switch li {
display: inline-block;width:30px;height:30px; line-height:1em;padding:0;margin-top:30px; clear:right;background:none;
}
#language-switch li a { background: url() no-repeat; }
#language-switch li a:hover { background: url() no-repeat; }
#language-switch li:first-child:after {
content: " / ";
}
.image-gallery ul{margin-top:30px;float:left;}
.image-gallery li {width:20%;margin-top:30px;}
.footer {background:#999; color:#fff; text-align:left;}
.footer p { margin:0; padding:10px;font-size:18px}
.center {
text-align: center;
}
.fade-in {
animation: fadeIn ease 15s;
-webkit-animation: fadeIn ease 15s;
-moz-animation: fadeIn ease 15s;
-o-animation: fadeIn ease 15s;
-ms-animation: fadeIn ease 15s;
}
.mybtn:hover{
background-color:rgba(221, 18, 123, 0.6);
transition:0.7s;
border-radius: 25px;
}
.logohover{
margin-top:50%;
}
.fancy {
line-height: 0.5;
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 3px solid #f1f1f1;
top: 15px;
width: 400px;
}
.fancy span:before {
right: 100%;
margin-right: 10px;
}
.fancy span:after {
left: 100%;
margin-left: 10px;
}
.section-header {
padding: 40px 0;
text-align: center;
}
.highlight { color: #69b3ea }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.highlight { color: #dd0a77 }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#photo{
margin-top:15%;
}
#photo:hover{
transition:0.2s;
box-shadow: 10px 10px 5px #888888;
}
#text{
text-align:justify;
font-size:16px;
font-family: 'Montserrat', sans-serif;
padding:30px;
}
#header1{
margin-top:10%;
font-family: 'Montserrat', sans-serif;
font-size:20px;
font-weight:700;
padding-left:20px;
}
#header2{
font-family: 'Montserrat', sans-serif;
font-size:32px;
font-weight:900;
padding-left:30px;
}
*, *:before, *:after {
box-sizing: border-box;
}
$bg-color: #d9d8c6;
$primary-color: #5b5a5c;
$secondary-color: darken($primary-color, 15%);
body {
background: $bg-color;
}
li {
list-style: none;
overflow: hidden;
}
.suga-container {
background: $primary-color;
box-shadow: 3px 3px 0px $secondary-color;
border: 2px solid $secondary-color;
border-radius: 5px;
}
.suga-slider-wrap {
overflow: hidden;
margin: 1em;
}
.suga-slider-group {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.suga-slide {
float: left;
position: relative;
margin-left: 0;
padding-right: 8px;
}
.imgc{
filter: grayscale(100%);
}
.imgc:hover{
filter: grayscale(0%);
}
.imgc1{
filter: grayscale(0%);
}
.imgc1:hover{
filter: grayscale(100%);
}
.container-fluid {
position: relative;
width: 50%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: #dd0A77;
}
.container-fluid:hover .overlay {
opacity: 0.6;
}
a.text {
color: white;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-family: 'Roboto Slab', serif;
}
#gallery img {
width:100%;
height:auto;
transition:all .3s ease-in-out;
}
#gallery img:hover {
transform:scale(1.3);
}
#gallery a {
display:block;
overflow:hidden;
margin-bottom:30px;
}
#gallery a img {
margin-bottom:0px;
display:block;
width:100%;
max-width:100%;
}
#gallery .description {
background-color:#fff;
display:block;
padding:20px 15px;
color:#333;
text-transform:uppercase;
clear:both;
position: relative;
}
#gallery .caption {
float:left;
font-size:16px;
}
#gallery .camera {
float:right;
}
#gallery a.btn {
display:inline-block;
}
.section {
}
.wrapsection {
padding-top:140px;
padding-bottom:140px;
}
.parallax.section .container{
position: relative;
z-index: 4;
}
.justtitle {
margin-top:80px;
}
.parallax {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
z-index: 1;
color:#fff;
}
.parallax-overlay {
position: absolute;
padding-top:140px;
padding-bottom:140px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
}
@media (max-width:767px) {
.section,.parallax.section .container {
padding-top:30px;
padding-bottom:30px;
}
.service-box,.img-responsive,.carousel {
margin-bottom:30px;
}
.maintitle .lead {
margin-left:0;
margin-right:0;
}
.container {
max-width:690px;
max-height:590px;
padding-left:30px;
padding-right:30px;
}
.navbar-nav>li>a {
padding:10px;
}
.header-button {
margin:0;
}
#hero .herotext {
padding: 90px 0px;
}
}
.active-section {
top:0px;
}
.navbar.active-section {
top:0 !important;
}
.section-title {
text-transform:uppercase;
font-size:30px;
letter-spacing:5px;
}
.whitecolor {
color: #fff;
}
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
width: 50%;
float: left;
clear: left;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 95%;
float: left;
border: 1px solid #d4d4d4;
/*border-radius: 2px;*/
/*padding: 20px;*/
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
margin-top:20%;
}
.timeline > li > .timeline-panel:hover{
box-shadow: 0px 5px 5px 5px #888888;
transition:0.6s;
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 24px;
height: 24px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
right: -12px;
/*background-color: #999999;*/
z-index: 100;
/*
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
*/
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
margin-top:50%;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge > a {
color: #C5C7C5 !important;
}
.timeline-badge a:hover {
color: #000 !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
padding:20px;
margin-bottom: 0;
background:#DCDCDC;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-footer{
padding:20px;
background-color:#dc117a;
color:white;
border-bottom:5px solid grey;
}
.timeline-footer > a{
cursor: pointer;
text-decoration: none;
}
.tooltip{
position:absolute;
z-index:1020;
display:block;
visibility:visible;
padding:5px;
font-size:11px;
opacity:0;
filter:alpha(opacity=0);
}
.tooltip.in{
/*opacity:0;
filter:alpha(opacity=80);*/
}
.tooltip.top{
margin-top:-2px;
}
.tooltip.right{
margin-left:2px;
}
.tooltip.bottom{
margin-top:2px;
}
.tooltip.left{
margin-left:-2px;
}
.tooltip.top .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip.left .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip.bottom .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip.right .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip-inner{
width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
text-decoration:none;
background-color:#313131;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tooltip-arrow{
position:absolute;
width:0;
height:0;
}
.timeline > li.timeline-inverted{
float: right;
clear: right;
margin-top: 30px;
margin-bottom: 30px;
}
.timeline > li:nth-child(2){
margin-top: 60px;
}
.timeline > li.timeline-inverted > .timeline-badge{
left: -12px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li {
margin-bottom: 20px;
position: relative;
width:100%;
float: left;
clear: left;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 28px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted{
float: left;
clear: left;
margin-top: 30px;
margin-bottom: 30px;
}
.timeline > li.timeline-inverted > .timeline-badge{
left: 28px;
}
}
.animated {
background-repeat: no-repeat;
background-position: left top;
margin-bottom:60px;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated1 {
background-repeat: no-repeat;
background-position: left top;
margin-bottom:60px;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-120px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-120px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
animation-name: fadeInDown;
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(120px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(120px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
/*products*/
.wrapper {
width: 100%;
position: relative;
background-color: #fff;
}
.wrapper:after {
padding-top: 42.85714285714287%;
display: block;
content: '';
}
.wrapper .column {
position: absolute;
left: 0;
top: 0;
width: 14.2857142857142857%;
float: left;
padding: 1px;
box-sizing: border-box;
}
.wrapper .column .inner {
width: 100%;
position: relative;
}
.wrapper .column .inner:after {
padding-top: 100%;
/* ratio 1:1 */
display: block;
content: '';
}
.wrapper .column .inner:before {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: 300ms ease-in-out;
transition: 300ms ease-in-out;
background-color: rgba(0, 0, 0, 0.4);
}
.wrapper .column .inner:hover:before {
background-color: rgba(0, 0, 0, 0);
}
.wrapper .column:nth-child(1) {
width: 28.5714285714285714%;
}
.wrapper .column:nth-child(2) {
left: 28.5714285714285714%;
}
.wrapper .column:nth-child(3) {
left: 28.5714285714285714%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wrapper .column:nth-child(4) {
width: 28.5714285714285714%;
left: 42.85714285714286%;
top: 0;
}
.wrapper .column:nth-child(4) .inner:after {
padding-top: 48.7%;
}
.wrapper .column:nth-child(5) {
left: 71.42857142857143%;
top: 0;
}
.wrapper .column:nth-child(6) {
left: auto;
right: 0;
top: 0;
}
.wrapper .column:nth-child(7) {
left: 71.42857142857143%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wrapper .column:nth-child(8) {
left: auto;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wrapper .column:nth-child(9) {
width: 28.5714285714285714%;
top: auto;
left: 0;
bottom: 0;
}
.wrapper .column:nth-child(9) .inner:after {
padding-top: 48.7%;
}
.wrapper .column:nth-child(10) {
left: 28.5714285714285714%;
top: auto;
bottom: 0;
}
.wrapper .column:nth-child(11) {
left: 42.85714285714286%;
top: auto;
bottom: 0;
width: 28.5714285714285714%;
}
.wrapper .column:nth-child(12) {
left: auto;
top: auto;
bottom: 0;
right: 0;
width: 28.5714285714285714%;
}
.wrapper .column:nth-child(12) .inner:after {
}
/* BEAUTY */
body,
html {
background-color: #fff;
padding: 0;
}
.wrapper .column .inner {
background-size: cover;
background-position: center;
}
.wrapper .column:nth-child(1) .inner {
background-image: url('img/gallery/i1.jpg');
}
.wrapper .column:nth-child(2) .inner {
background-image: url('img/gallery/i1.jpg');
}
.wrapper .column:nth-child(3) .inner {
background-image: url('img/gallery/i1.jpg');
}
.wrapper .column:nth-child(4) .inner {
background-image: url('img/gallery/i1.jpg');
}
.wrapper .column:nth-child(5) .inner {
background-image: url('img/gallery/i1.jpg');
}
.wrapper .column:nth-child(6) .inner {
background-image: url('img/gallery/i1.jpg');
}
.wrapper .column:nth-child(7) .inner {
background-image: url('img/gallery/i1.jpg');
}
gallery-title
{
font-size: 36px;
color: #42B32F;
text-align: center;
font-weight: 500;
margin-bottom: 70px;
}
.gallery-title:after {
content: "";
position: absolute;
width: 7.5%;
left: 46.5%;
height: 45px;
}
.filter-button
{
font-size: 18px;
border: 1px solid #444;
border-radius: 5px;
text-align: center;
color: #8c9001;
margin-bottom: 30px;
cursor: pointer;
}
.filter-button:hover
{
font-size: 18px;
border: 1px solid #8c9001;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #8c9001;
}
.port-image
{
width: 100%;
}
.gallery_product
{
margin-bottom: 30px;
}
/*-testimonial*/
section {
padding-top: 0px;
padding-bottom: 10px;
}
.quote {
color: #dd0A77;
text-align: center;
margin-bottom: 20px;
}
/*-------------------------------*/
/* Carousel Fade Transition */
/*-------------------------------*/
#fade-quote-carousel.carousel {
padding-bottom: 20px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
background-color: #6c6c6c;
border: none;
}
#fade-quote-carousel blockquote {
text-align: center;
border: none;
}
#fade-quote-carousel .profile-circle {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
}