html {
font-size: 16px; /*=1rem*/
}
@media only screen and (min-width: 480px) {
html{font-size: 12px}
}
@media only screen and (min-width: 768px) {
html{font-size: 13px}
}
@media only screen and (min-width: 1000px) {
html{font-size: 14px}
}
@media only screen and (min-width: 1170px) {
html{font-size: 15px}
}
@media only screen and (min-width: 1340px) {
html{font-size: 16px}
}
@media only screen and (min-width: 1580px) {
html{font-size: 17px}
}
* { /* selectorul de "all" */
margin: 0;
box-sizing: border-box;
/*z-index:-1 ; /* mutam totul mai jos decat header */
position: relative;
}
*:focus{
outline: none; /* scoate "border" pe interne explore, firefox, opera*/
box-shadow: none; /* scoate umbra albastra */
}
a, a:hover, a:active, a:visited {
text-decoration: none!important;
}
ul, ol {
list-style-type: none;
padding-left: 0;
}
.clearfix{
clear: both;
}
img {
display: block;
}
@font-face {
font-family:"Arhaic Romanesc";
src: url("/fonts/Arhaic_rom.ttf") format ("ttf");
}
h1{
font-family:Arhaic Romanesc;
}
body{
padding-top: 0px; /* compenseaza headerul fixed */
/*font-family: 'Montserrat', sans-serif;*/
font-family:Arhaic Romanesc;
}
main, aside, nav, section, footer, header {
display: block;
}
/*.fa {
width: 1.2em;
height: 1em;
} */
/* Template */
/* Start header */
header {
background-color: #d4d4d6;
color: #000;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
header .image{
float: left;
width: 40%;
margin-top: 0px;
}
header .image img{
width: 35%;
}
header .topnav .container{
padding-top: 30px;
}
.logo{
width: 100%;
text-align: center;
display: inline-block;
}
header .topnav .container a {
text-decoration: none;
font-size: 1rem;
padding: 10px;
color: #000;
font-family: 'Josefin Sans', sans-serif;
}
/* Add a black background color to the top navigation */
.topnav {
overflow: hidden;
float: left;
width: 60%;
}
/* Style the links inside the navigation bar */
.topnav a {
/* float: left;*/
display: inline-block;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 767px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav a {
float: none;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 767px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media (max-width: 767px){
.image img{
width: 20%!important;
}
}
@media screen and (max-width: 766px) {
.navbar-toggler{
text-align: right;
margin-left: 87%;
margin-bottom: 20px;
}
}
@media (max-width: 425px){
header .image{
width: 100%;
}
header .image img{
width: 80%;
}
}
@media screen and (max-width: 375px) {
.navbar-toggler{
text-align: right;
margin-left: 80%;
}
}
@media (max-width: 320px){
header .image img{
width: 80%;
}
}
/* End header */
.hero-image {
background-image: url("../img/test.jpg");
height: 68%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-image h1{
font-size: 15px!important;
}
.hero-image .hero-text img{
width: 73%;
display: inline-block;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}
/* Star wrapper */
.wrapper{
width: 100%;
height: auto;
}
.wrapper .container{
max-width: 100%;
margin: 0 auto;
}
.wrapper .abs{
width: 100%;
position: relative; /*necesar pentru copilul absolut */
}
.wrapper .abs img{
width: 100%;
z-index: -1; /* imaginea sa fie sub text */
display: block;
opacity: 1;
}
.abs .caption{
position:absolute;
background-color:rgba(128,128,128, 0.4);
bottom:0;
left:0;
right:0;
font-size:1.5rem;
text-align: center;
}
.wrapper .abs h1{
padding-top: 10px;
font-size: 1.3rem;
/*background-color: rgba(0,0,0,0.4);*/
position: absolute; /* nu se foloseste fara coordonate */
left: 0;
right: 0;
text-align: center;
top: 50%;
transform: translateY(-50%); /* cu % isi ia exact mijlocul parintelui*/
z-index: 9;
margin: 0% 25%;
color: #fff;
font-weight: 100;
}
.wrapper .button {
font-size: 14px;
margin: 10px;
display: inline-block;
background-color: transparent;
color: #fff;
padding: 0.6rem 1.2rem;
font-family: sans-serif;
border-radius: 0.2rem;
border: 1px solid white;
}
@media (max-width: 425px){
.wrapper .abs h1{
font-size: 0.8rem;
}
.wrapper .abs .button{
font-size: 0.7rem;
padding: 5px 8px;
}
}
@media (max-width: 375px){
.wrapper .abs h1{
font-size: 0.6rem;
}
.wrapper .abs .button{
font-size: 0.6rem;
padding: 3px 6px;
}
}
@media (max-width: 320px){
.wrapper .abs .button{
font-size: 0.6rem;
padding: 2px 4px;
}
}
/* End wrapper */
/* Start content */
.content{
background-color: #ffffff;
padding: 10%;
margin-top: -47px;
}
.content .container{
max-width: 1100px;
}
.content .description {
float: left;
width: 33.3333%;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
}
.content .description i{
font-size: 4rem;
padding-bottom: 20px;
}
.content .description img{
vertical-align: middle;
display: inline-block;
position: relative;
padding-bottom: 20px;
}
.content .description .orange{
color: orange;
}
.content .description .red{
color: red;
}
.content .description .blue{
color: #10bdf0;
}
.content .description .color span{
color: orange;
}
.content .description .paint span{
color: red;
}
.content .description .pallet span{
color: #10bdf0;
}
.content p{
text-align: center;
padding-top: 6%;
line-height: 26px;
color: #bababa;
font-weight: 100;
font-size: 14px;
}
@media (max-width: 767px){
.content .description{
width: 100%;
padding-bottom: 30px;
}
.content .description img{
margin: 0 auto;
text-align: center;
}
}
@media (max-width: 545px){
.content{
padding-top: 15%;
}
}
@media (max-width: 425px){
.content .container{
padding-top: 30px;
}
.content .description img{
width: 20%;
}
}
@media (max-width: 375px){
.content{
padding-top: 24%;
}
}
/* End content */
/* Start Blog*/
.blog{
padding: 4%;
/*background-image: url(../img/cake2.jpg);*/
}
.blog .container{
max-width: 1100px;
}
.title{
text-align: center;
}
.title h2{
padding-bottom: 20px;
font-weight: 100;
color: #000;
font-family: 'Josefin Sans', sans-serif;
}
.title p{
color: #000;
font-size: 18px;
font-weight: 500;
padding-bottom: 30px;
padding:0 0%;
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
.blog .box{
margin: 0 auto
}
.boxes{
float: left;
width: 32%;
text-align: center;
border: 0px solid black;
margin: 7px;
padding: 1px;
background-color: #fff;
}
.boxes img{
max-width: 100%;
}
.boxes h4{
display: block;
min-height: 80px;
color: #444444;
font-weight: 100;
padding-top: 20px;
font-size: 1.1rem;
padding-bottom: 50px;
margin: 14px;
}
.data li{
width: 50%;
float: left;
font-size: 0.7rem;
color: #bababa;
}
.data .border{
border-right: 1px solid #bababa;
padding-right: 20px;
}
.box{
max-width: 1200px;
}
.boxes .paragraf{
font-size: 0.9rem;
text-align: justify;
color: #575757;
padding-top: 55px!important;
padding-bottom: 50px;
margin: 16px;
}
.boxes .bottom p{
float: left;
padding-top: 30px;
}
.boxes .bottom p{
width: 80%;
text-align: left;
}
.boxes ul{
margin: 3px;
}
.boxes .bottom i{
width: 20%;
}
.boxes .bottom span{
padding-left: 5px;
}
@media (max-width: 1142px){
.box .boxes {
width: 31%;
}
}
@media (max-width: 767px){
.blog .box{
max-width: 100%;
}
.blog .box .boxes{
width: 100%;
margin: 0 auto;
padding: 20px;
}
.box .boxes img{
margin: 0 auto;
text-align: center;
}
.title p {
margin-bottom: 15px;
}
}
@media (max-width: 425px){
.title p {
font-size: 18px;
/*padding-bottom: 15px;*/
font-family: 'Raleway', sans-serif;
line-height: 28px;
letter-spacing: 0.5px;
font-weight: 300;
}
}
/* End Blog */
/* Start expert */
.expert{
background-color: #fff;
padding: 5%;
}
.expert h2{
text-align: center;
margin-bottom: 80px;
font-family: 'Josefin Sans', sans-serif;
}
.expert .container{
max-width: 1100px;
}
.expert .projects {
float: left;
width: 16.66667%;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
}
.expert .projects img{
display: inline-block;
text-align: center;
padding-bottom: 8px;
width: 60%;
}
.expert .projects h3{
color: #868585;
padding-bottom: 10px;
font-family: 'Raleway', sans-serif;
line-height: 28px;
letter-spacing: 4px;
font-size: 16px;
font-weight: 600;
}
.expert .projects p{
color: #bababa;
font-size: 17px;
font-weight: 400;
opacity: 0.75;
}
@media (max-width: 767px){
.expert .projects{
width: 50%;
padding-bottom: 30px;
padding-right: 0px;
padding-left: 0px;
}
.content .description img{
margin: 0 auto;
text-align: center;
}
}
@media (max-width: 425px){
.expert .projects {
width: 100%;
}
.expert .container{
padding-top: 40px;
}
.expert .projects img{
width: 60px;
}
}
@media (max-width: 320px){
.expert .projects img{
width: 50px;
}
.expert .projects p, h2{
font-size: 15px;
}
.expert .projects h2{
font-size: 30px;
}
}
/* End expert */
.about h3{
/*background-color: rgba(255,255,255, 0.7);*/
color: #000;
margin-top: 120px;
font-family: 'Josefin Sans', sans-serif;
}
.about p{
background-color: rgba(255,255,255, 0.8);
margin-top: 20px;
margin-bottom:120px;
font-family: 'Josefin Sans', sans-serif;
padding: 40px;
line-height: 22px;
}
.about p span{
font-size: 24px;
font-weight: 500;
}
.events h3{
margin-top: 80px;
font-family: 'Josefin Sans', sans-serif;
}
.events p{
font-family: "Raleway";
font-weight: 100;
line-height: 1.7em;
font-size: 16px;
}
.adress{
background-image: url(../img/niky25.jpg)
}
.adress h3{
margin-top: 200px;
/*background-color: rgba(255,255,255, 0.7);*/
font-family: 'Josefin Sans', sans-serif;
}
.adress ul{
margin-bottom: 450px;
background-color: rgba(255,255,255, 0.8);
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
padding: 45px;
line-height: 22px;
}
.adress .container .row ul .contact{
font-size: 28px;
}
.meniu{
background-image: url(../img/food.jpg);
}
/* Testimonial slider */
@import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
}
html {
width: 100%;
height: auto;
}
body {
width: 100%;
height: auto;
font-size: 16px;
font-family: Dubai-Light;
}
.testim {
height: 47%;
-webkit-background-image: url("https://s26.postimg.org/jwkc4z42h/testim6.jpg");
-webkit-background-size: cover;
-webkit-background-position: center;
-webkit-background-attachment: fixed;
-moz-background-image: url("https://s26.postimg.org/jwkc4z42h/testim6.jpg");
-moz-background-size: cover;
-moz-background-position: center;
-moz-background-attachment: fixed;
-ms-background-image: url("https://s26.postimg.org/jwkc4z42h/testim6.jpg");
-ms-background-size: cover;
-ms-background-position: center;
-ms-background-attachment: fixed;
-o-background-image: url("https://s26.postimg.org/jwkc4z42h/testim6.jpg");
-o-background-size: cover;
-o-background-position: center;
-o-background-attachment: fixed;
background-image: url("https://s26.postimg.org/jwkc4z42h/testim6.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: url(../img/wedd21.jpg);
}
.testim .wrap {
position: relative;
width: 100%;
max-width: 1020px;
padding: 40px 20px;
margin: auto;
}
.testim .arrow {
display: block;
position: absolute;
color: #eee;
cursor: pointer;
font-size: 2em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before {
cursor: pointer;
}
.testim .arrow:hover {
color: #ea830e;
}
.testim .arrow.left {
left: 10px;
}
.testim .arrow.right {
right: 10px;
}
.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
height: 12px;
}
.testim .dots .dot {
list-style-type: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #eee;
margin: 0 10px;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.testim .dots .dot.active,
.testim .dots .dot:hover {
background: #ea830e;
border-color: #ea830e;
}
.testim .dots .dot.active {
-webkit-animation: testim-scale .5s ease-in-out forwards;
-moz-animation: testim-scale .5s ease-in-out forwards;
-ms-animation: testim-scale .5s ease-in-out forwards;
-o-animation: testim-scale .5s ease-in-out forwards;
animation: testim-scale .5s ease-in-out forwards;
}
.testim-cover {
background: rgba(177, 31, 31, 0.8);
width: 100%;
height: 100%;
}
.testim .cont {
position: relative;
overflow: hidden;
}
.testim .cont > div {
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0 0 70px 0;
opacity: 0;
}
.testim .cont > div.inactive {
opacity: 1;
}
.testim .cont > div.active {
position: relative;
opacity: 1;
}
.testim .cont div .img img {
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}
.testim .cont div h2 {
color: #ea830e;
font-size: 1em;
margin: 15px 0;
}
.testim .cont div p {
font-size: 1.15em;
color: #eee;
width: 80%;
margin: auto;
}
.testim .cont div.active .img img {
-webkit-animation: testim-show .5s ease-in-out forwards;
-moz-animation: testim-show .5s ease-in-out forwards;
-ms-animation: testim-show .5s ease-in-out forwards;
-o-animation: testim-show .5s ease-in-out forwards;
animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active h2 {
-webkit-animation: testim-content-in .4s ease-in-out forwards;
-moz-animation: testim-content-in .4s ease-in-out forwards;
-ms-animation: testim-content-in .4s ease-in-out forwards;
-o-animation: testim-content-in .4s ease-in-out forwards;
animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active p {
-webkit-animation: testim-content-in .5s ease-in-out forwards;
-moz-animation: testim-content-in .5s ease-in-out forwards;
-ms-animation: testim-content-in .5s ease-in-out forwards;
-o-animation: testim-content-in .5s ease-in-out forwards;
animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img img {
-webkit-animation: testim-hide .5s ease-in-out forwards;
-moz-animation: testim-hide .5s ease-in-out forwards;
-ms-animation: testim-hide .5s ease-in-out forwards;
-o-animation: testim-hide .5s ease-in-out forwards;
animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
-webkit-animation: testim-content-out .4s ease-in-out forwards;
-moz-animation: testim-content-out .4s ease-in-out forwards;
-ms-animation: testim-content-out .4s ease-in-out forwards;
-o-animation: testim-content-out .4s ease-in-out forwards;
animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
-webkit-animation: testim-content-out .5s ease-in-out forwards;
-moz-animation: testim-content-out .5s ease-in-out forwards;
-ms-animation: testim-content-out .5s ease-in-out forwards;
-o-animation: testim-content-out .5s ease-in-out forwards;
animation: testim-content-out .5s ease-in-out forwards;
}
@-webkit-keyframes testim-scale {
0% {
-webkit-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-webkit-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-webkit-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-webkit-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-moz-keyframes testim-scale {
0% {
-moz-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-moz-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-moz-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-moz-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-ms-keyframes testim-scale {
0% {
-ms-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-ms-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-ms-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-ms-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-o-keyframes testim-scale {
0% {
-o-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-o-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-o-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-o-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@keyframes testim-scale {
0% {
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-webkit-keyframes testim-content-in {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes testim-content-in {
from {
opacity: 0;
-moz-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes testim-content-in {
from {
opacity: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes testim-content-in {
from {
opacity: 0;
-o-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes testim-content-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-moz-keyframes testim-content-out {
from {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-ms-keyframes testim-content-out {
from {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-o-keyframes testim-content-out {
from {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
@-webkit-keyframes testim-show {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes testim-show {
from {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes testim-show {
from {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes testim-show {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes testim-hide {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes testim-hide {
from {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes testim-hide {
from {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes testim-hide {
from {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
@media all and (max-width: 300px) {
body {
font-size: 14px;
}
}
@media all and (max-width: 500px) {
.testim .arrow {
font-size: 1.5em;
}
.testim .cont div p {
line-height: 25px;
}
}
/* Start testimonials */
.testimonials .comment{
width: 100%;
position: relative; /*necesar pentru copilul absolut */
}
.testimonials .comment img{
width: 100%;
z-index: -1; /* imaginea sa fie sub text */
display: block;
}
.testimonials .comment h2 {
padding-top: 10px;
font-size: 2.3rem;
font-weight: 700;
position: absolute; /* nu se foloseste fara coordonate */
left: 0;
right: 0;
text-align: center;
top: 30%;
transform: translateY(-90%); /* cu % isi ia exact mijlocul parintelui*/
z-index: 9;
margin: 0% 25%;
color: #fff;
font-weight: 100;
}
.testimonials .comment p{
position: absolute; /* nu se foloseste fara coordonate */
left: 0;
right: 0;
text-align: center;
top: 60%;
transform: translateY(-60%); /* cu % isi ia exact mijlocul parintelui*/
z-index: 9;
margin: 0% 25%;
color: #fff;
}
@media (max-width: 425px){
.testimonials .comment h2{
padding-top: 30px;
font-size: 1.2rem;
}
}
/* End testimonials*/
/* Start membership */
.membership{
padding: 2%;
background-color: #3dcac9;
}
.membership .container{
max-width: 1200px;
}
.membership .subscribe p{
width: 80%;
float: left;
color: #fff;
font-size: 1.3rem;
text-align: center;
padding-top: 15px;
}
.membership .subscribe a{
color: #fff;
text-decoration: underline;
}
.membership button{
width: 20%;
padding: 15px 25px;
background-color: transparent;
border:1px solid white;
text-align:center;
color: #fff;
font-size: 1.05rem;
}
@media (max-width: 425px){
.membership .subscribe p {
width: 100%;
padding-bottom: 20px;
font-size: 1rem;
}
.membership .subscribe button {
width: 100%;
font-size: 1rem;
}
}
/* End membership */
/* Start partner */
.partner{
padding: 1%;
background-color: #000;
}
.partner .container{
max-width: 1100px;
}
.partner .logo{
width: 20%;
float: left;
text-align: center;
position: relative;
padding-top: 20%;
}
.partner .logo img{
width: 70%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 425px){
.partner .logo{
width: 50%;
}
.partner .container{
padding-top: 30px;
}
.partner .logo img{
width: 100px;
}
}
/* End partner */
#map-canvas{
height: 500px;
}
@media (max-width: 767px){
#map-canvas{
height: 300px;
}
}
.photo h2{
text-align: center;
margin-top: 60px;
margin-bottom: 80px;
font-family: 'Josefin Sans', sans-serif;
}
.road {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 33.3333%; /* IE10 */
flex: 25%; /*old 33.3333%*/
max-width: 25%; /*old 33.3333%*/
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* Start footer */
footer{
padding-top: 45px;
padding-bottom: 3%;
background-color: #bdbdbd!important;
}
footer .details {
float: left;
width: 33.33333%;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
}
footer .container .row img{
width: 36%;
margin-left: 38%;
}
footer .container .row h5{
text-align: left;
font-family: 'Josefin Sans', sans-serif;
color: #fff;
}
footer .container .row li{
text-align: left;
color: #fff;
line-height: 25px;
font-size: 1rem;
}
footer .container .row li a {
color: #fff;
font-family: 'Josefin Sans', sans-serif;
}
footer .container .row p{
color: #9e9e9e;
font-size: 1rem;
text-align: left;
}
footer .container .row .contact ul li{
color: #6f6f6f;
}
footer .container .row .contact ul i{
margin-right: 8px;
font-size: 21px;
margin-bottom: 20px;
}
footer .container .row .icons i{
font-size: 30px;
color: #fff;
margin-top: 10px;
}
footer .container .row .icons i:hover{
color: #4267b2;
}
/*footer .container .row i {
font-size: 10px;
padding: 32px;
width: 19%;
text-align: center;
margin: 10px;
}
/*@media (max-width: 425px){
footer .details{
width: 100%;
}
footer{
padding-bottom: 88%;
}
footer .details li{
text-align: center;
margin: 10px 15px;
}
footer .details p{
text-align: center;
margin-bottom: 15px;
}
footer .details fa{
text-align: center;
}
}
@media (max-width: 320px){
footer{
padding-bottom: 100%;
}
/* End footer */
.grid-gallery{
background-color: #000;
}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot?pvm5gj');
src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'),
url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'),
url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
} /* Icons created with icomoon.io/app */
.tabs {
position: relative;
width: 100%;
overflow: hidden;
/*padding-top: 3em;*/
font-weight: 300;
background-color: #d4d4d6;
}
/* Nav */
.tabs nav {
text-align: center;
}
.tabs nav ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
.tabs nav ul li {
border: 1px solid #becbd2;
border-bottom: none;
margin: 0 0.25em;
display: block;
float: left;
position: relative;
z-index: 1000;
}
.tabs nav li.tab-current {
border: 1px solid #8c3633;
box-shadow: inset 0 2px #d4d4d6;
border-bottom: none;
z-index: 1000;
}
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
content: '';
position: absolute;
height: 1px;
right: 100%;
bottom: 0;
width: 1000px;
background: #d4d4d6;
}
.tabs nav li.tab-current:after {
right: auto;
left: 100%;
width: 4000px;
}
.tabs nav a {
color: #000;
display: block;
font-size: 1.2em;
line-height: 2.5;
padding: 0 1.25em;
white-space: nowrap;
font-weight: bold;
}
.tabs nav a:hover {
color: rgb(167, 31, 31);
}
.tabs nav li.tab-current a {
color: #000;
}
/* Icons */
.tabs nav a:before {
display: inline-block;
vertical-align: middle;
text-transform: none;
font-weight: normal;
font-variant: normal;
font-family: 'icomoon';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
margin: -0.25em 0.4em 0 0;
}
.icon-food:before {
content: "\e600";
}
.icon-lab:before {
content: "\e601";
}
.icon-cup:before {
content: "\e602";
}
.icon-truck:before {
content: "\e603";
}
.icon-shop:before {
content: "\e604";
}
/* Content */
.content section {
font-size: 1.25em;
padding: 3em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
.mediabox {
float: left;
width: 33%;
padding: 0 25px;
}
.mediabox img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.mediabox h3 {
margin: 0.75em 0 0.5em;
}
.mediabox p {
padding: 0 0 1em 0;
margin: 0;
line-height: 1.3;
}
/* Example media queries */
@media screen and (max-width: 52.375em) {
.tabs nav a span {
/*display: none;*/
}
.tabs nav a:before {
margin-right: 0;
}
.mediabox {
float: none;
width: auto;
padding: 0 0 35px 0;
font-size: 90%;
}
.mediabox img {
float: left;
margin: 0 25px 10px 0;
max-width: 40%;
}
.mediabox h3 {
margin-top: 0;
}
.mediabox p {
margin-left: 40%;
margin-left: calc(40% + 25px);
}
.mediabox:before,
.mediabox:after {
content: '';
display: table;
}
.mediabox:after {
clear: both;
}
}
@media screen and (max-width: 32em) {
.tabs nav ul,
.tabs nav ul li a {
width: 166%;
padding: 0;
}
.tabs nav ul li a span{
margin-right: 104px;
}
.tabs nav ul li {
width: 20%;
width: calc(20% + 1px);
margin: 0 0 0 -1px;
}
.tabs nav ul li:last-child {
border-right: none;
}
.mediabox {
text-align: center;
}
.mediabox img {
float: none;
margin: 0 auto;
max-width: 100%;
}
.mediabox h3 {
margin: 1.25em 0 1em;
}
.mediabox p {
margin: 0;
}
}
@media screen and (max-width: 425px) {
.tabs nav ul li a span{
margin-right: 83px;
}
}
@media screen and (max-width: 375px) {
.tabs nav ul li a span{
margin-right: 73px;
}
}
#tabs .paragraf{
color: #000;
padding-top: 0px;
}
#section-1{
padding-top: 0px;
}
#exemple ul#box-container li.box a.swipebox img{
width: 33.3%!important;
}
#exemple a.swipebox img{
}
#exemple .row .box a img{
width: 100%;
}
/* Carousel probleme scroll lateral-------------------------------------------------------------------------------- */
.gallery{
background-image: url(../img/gal02.jpg);
/*background: rgba(0, 0, 0, 0.9);*/
}
.gallery .container {
position: relative;
}
/* Hide the images by default */
.gallery .mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.gallery .cursor {
cursor: pointer;
}
/* Next & previous buttons */
.gallery .prev,
.gallery .next {
cursor: pointer;
position: absolute;
top: 60%;
width: 10px;
padding: 16px;
margin-top: -50px;
color: white!important;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.gallery .prev{
color: #fff;
text-align: left;
left: 15px;
}
.gallery .next{
right: 25px;
text-align: left;
color: #fff;
}
@media screen and (min-width: 768px){
.gallery .next{
margin-right: 40%;
}
}
/* Position the "next button" to the right */
.gallery .next {
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.gallery .prev:hover,
.gallery .next:hover {
color: rgba(255, 255, 255, 0.5);
}
/* Number text (1/3 etc) */
.gallery .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.gallery .caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.gallery .row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.gallery .column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.gallery .demo {
opacity: 0.6;
}
.gallery.active,
.gallery .demo:hover {
opacity: 1;
}
.gallery .container .mySlides img{
width: 60%!important;
}
@media screen and (max-width:767px ) {
.gallery .container .mySlides img{
width: 100%!important;
}
.gallery{
background-image: none;
}
}
@media screen and (max-width:767px ) {
.gallery .prev {
position: absolute!important;
left: 15px!important;
text-align: left!important;
}
.gallery .next {
position: absolute!important;
right: 15px!important;
text-align: right!important;
}
}
/* NAVBAR-----------------------------------------------------------------------------------*/
.navbar .logo{
width: 5%;
margin-right: 22%;
margin-left: 21%;
}
.navbar .navbar-collapse .navbar-nav li a{
color: #000;
font-family: 'Josefin Sans', sans-serif;
}
.navbar .navbar-collapse .navbar-nav li a:hover{
color: rgb(167, 31, 31);
border-bottom: 1px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #000;
transition: width .5s;
}
.cool-link:hover::after {
width: 90%;
//transition: width .3s;
}
@media screen and (max-width:767px ) {
.cool-link:hover::after {
width: 50%;
//transition: width .3s;
}
}
@media screen and (max-width:1500px ) {
.navbar .logo {
width: 5%;
margin-right: 20%;
margin-left: 17%;
}
}
@media screen and (max-width:1350px ) {
.navbar .logo{
margin-right: 18%;
margin-left: 17%;
}
}
@media screen and (max-width:1180px ) {
.navbar .logo{
margin-right: 13%;
margin-left: 11%;
/*width: 13%;*/
}
}
@media screen and (max-width:970px ) {
.navbar .logo{
margin-right: 12%;
margin-left: 9%;
/*width: 15%;*/
}
#collapsibleNavbar ul{
font-size: 0.9rem;
}
}
@media screen and (max-width:890px ) {
.navbar .logo{
margin-right: 11%;
margin-left: 8%;
}
#collapsibleNavbar ul{
font-size: 0.8rem;
}
}
@media screen and (max-width:767px ) {
.navbar .logo{
/*width: 25%;*/
margin-top: 15px;
height: 5%;
}
.navbar .navbar-collapse{
flex-basis: 0%;
}
}
@media screen and (max-width:600px ) {
.navbar .logo{
width: 10%;
}
}
@media screen and (max-width:480px ) {
.navbar .logo{
width: 10%;
}
}
@media screen and (max-width:425px ) {
.navbar .logo{
width: 10%;
}
}
@media screen and (max-width:380px ) {
.navbar .logo{
width: 11%;
}
}
@media screen and (max-width:325px ) {
.navbar .logo{
width: 13%;
}
}
/* FOOTER ------------------------------------------------------------------------------- */
@media screen and (max-width:1200px ) {
footer .container .row li{
font-size: 0.9rem;
}
}
@media screen and (max-width:991px ) {
footer .container .row img{
width: 44%;
margin-top: 0%;
margin-left: 40%;
margin-bottom: 40px;
}
}
@media screen and (max-width:767px ) {
footer .container .row li{
font-size: 0.8rem;
}
footer .container .row h5{
text-align: center;
}
footer .container .row li{
text-align: center;
}
footer .container .row img{
width: 21%;
}
.blog h2{
font-size: 18px!important;
}
.size{
font-size: 18px!important;
}
}
@media screen and (max-width:575px ) {
footer .container .row img{
width: 18%;
margin-left: 41%;
}
footer .menu, footer .contact{
margin-bottom: 20px;
}
footer .icons{
margin-bottom: 30px;
}
}
@media screen and (max-width:425px ) {
footer .container .row img{
width: 26%;
margin-left: 37.5%;
}
}
@media screen and (max-width:325px ) {
footer .container .row img{
width: 32%;
margin-left: 34.5%;
}
}
/* TESTIMONIALS-----------------------------------------------------------------------------*/
@media screen and (max-width:675px ) {
.testim{
height: 58%;
}
.testim .cont div p{
font-size: 1rem;
}
}
@media screen and (max-width:475px ) {
.testim{
height: 66%;
}
}
@media screen and (max-width:377px ) {
.testim{
height: 64%;
}
.testim .cont div p{
font-size: 0.9rem;
}
}
@media screen and (max-width:377px ) {
.testim{
height: 70%;
}
}
/* ABOUT US---------------------------------------------------------------------------------*/
@media screen and (max-width:767px ) {
.blog h2{
font-size: 1.7rem;
}
.blog p{
font-size: 0.9rem;
}
}
@media screen and (max-width:475px ) {
.blog h2{
margin-top: 20px;
}
}
/*EVENTS------------------------------------------------------------------------------------*/
.plain:before{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 2px solid white;
opacity: .5;
z-index: 1;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
@media screen and (max-width:991px ) {
.expert h3{
font-size: 0.9rem!important;
}
}
@media screen and (max-width:767px ) {
.expert h2{
font-size: 1.7rem;
margin-top: 20px;
}
.expert h3{
font-size: 0.8rem;
}
.expert .projects img{
width: 33%;
}
}
@media screen and (max-width:475px ) {
.expert h2{
margin-top: 20px;
}
}
@media screen and (max-width:425px ) {
.expert h2{
margin-top: 20px;
margin-bottom: 0px;
}
}
@media screen and(max-width:514px) {
#tabs #nav {
text-align: center;
width: 160%!important;
}
}
.container .row .block{
background-color: #fff;
padding: 4%;
}
.container .row .block p{
text-align: justify;
}
.container .row .block h5{
margin-bottom: 20%;
}
/*----SLIDER RESTAURANT MOBILE-----*/
@media screen and (max-width:800px){
#restaurant #hidden{
display: none!important;
}
#restaurant .mySlides img{
width: 100%!important;
margin-bottom: 5%;
}
}
/* Start SLIDER RESTAURANT*/
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
/*.mySlides {
display: none;
}*/
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: 20%;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0,0,0,0.1);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
margin-top: 25px;
margin-bottom: 45px;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 1;
}
.active,
.demo:hover {
opacity: 1;
}
#restaurant{
background-image: url(../img/background-restaurant-opacity1.jpg)!important;
}
#restaurant .next{
width: 1%;
margin-right: 17%;
}
#restaurant .prev{
width: 1%;
margin-left: 15%;
}
footer{
background-image: url(../img/footer1.jpg);
}
body{
background-image: url(../img/Body.png);
background-position: bottom;
}
.container{
background-image: url(../img/body-background.png);
}
/* End SLIDER RESTAURANT*/
/* Start Main Slider*/
/* Slideshow container */
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.preva, .nexta {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 32px 32px 0;
}
/* Position the "next button" to the right */
.nexta {
right: 0;
border-radius: 32px 0 0 32px;
}
/* On hover, add a black background color with a little bit see-through */
.preva:hover, .nexta:hover {
background-color: rgba(0,0,0,0.2);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: 1}
to {opacity: 1}
}
@keyframes fade {
from {opacity: 1}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.preva, .nexta,.text {font-size: 11px}
}
.fade:not(.show) {
opacity: 1!important;
}
/*End Main Slider---------------------------------------------*/
/*Logo Imagine slider*/
.slideshow-container .mySlidess .second{
width: 55%;
position: absolute;
top: 10%;
left: 23.5%;
}
.slideshow-container .mySlidess .third{
position: absolute;
top: 49%;
left:36%;
font-size: 0.85rem;
color: #fff;
}
/*Logo Imagine slider*/
/*Start Media Query-------------------------------------------*/
@media only screen and (max-width: 801px) {
#restaurant .next {
margin-right: 3%;
}
#restaurant .prev {
margin-left: -1%;
}
.prev, .next{
top: 55%!important;
}
}
@media only screen and (max-width: 767px) {
.navbar {
display: none;
}
.navbar button{
display: none;
}
.navbar .logo{
margin-top: 0px!important;
/*width: 12%;*/
margin-left: 0px!important;
margin-right: 0px!important;
}
.blog p{
text-align: justify!important;
}
.container .row .block h5{
margin-bottom: 7%!important;
}
#restaurant{
max-width: 100%!important;
}
}
@media only screen and (max-width: 540px){
#restaurant .next {
margin-right: 7%!important;
}
#restaurant .prev {
margin-left: 0%!important;
}
.prev, .next{
top: 61%!important;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0);
}
}
@media only screen and (max-width: 485px) {
.navbar .logo{
margin-top: 0px!important;
/*width: 15%;*/
}
#products{
padding: 1%;
}
.preva:hover, .nexta:hover {
background-color: rgba(0,0,0,0);
}
}
@font-face{
font-family:'Arhaic'!important;
src:url(https://www.casa-miorita.ro/fonts/Arhaic_rom.ttf)!important format("truetype");
}
.navbar .collapse .navbar-nav .nav-item a{
font-family: Arhaic;
letter-spacing: 2;
}
.blog h2{
font-family: Arhaic;
font-weight: 600;
letter-spacing: 5;
}
#house{
font-family: Arhaic;
font-weight: 600;
letter-spacing: 5;
}
#products{
font-family: Arhaic;
font-weight: 600;
letter-spacing: 5;
}
.container .row .block h5{
font-family: Arhaic;
font-weight: 600;
letter-spacing: 2px;
}
.blog .container .title p{
font-family: 'Cinzel', serif;
font-weight: 800;
letter-spacing: 3px;
}
.container .row .block p{
font-family: 'Cinzel', serif;
font-weight: 600;
}