html {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
color: #f7f8f8;
background-color: #313c4c;
background-image: url(//pixelemur.hu/wp-content/themes/basic-theme/img/body.png);
background-position: cover;
background-repeat: no-repeat;
font-family: 'Dosis', sans-serif;
}
main ul {
margin: 10px 0;
}
main ul li {
line-height: 1.2;
margin-bottom: 5px;
position: relative;
padding-left: 15px;
}
main ul li:before{
content: "";
position: absolute;
height: 5px;
width: 5px;
border-radius: 50%;
display: block;
top: 10px;
left: 0;
background: #ff8f9a;
}
aside {
float: left;
width: 30%;
padding: 10px 15px 30px 15px;
}
main {
float: left;
width: 70%;
padding: 0 15px 20px 15px;
}
#content {
overflow: hidden;
clear: both;
padding-top: 10px;
}
.inner-page {
margin-bottom: 60px;
background-color: #313c4c;
background-image: url(//pixelemur.hu/wp-content/themes/basic-theme/img/body.png);
background-repeat: no-repeat;
}
.center-box {
margin: 0 auto;
max-width: 1560px;
overflow: hidden;
padding: 0 15px;
}
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
padding: 20px 0 0 0;
}
.flex {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
padding: 20px 0 0 0;
align-content: stretch;
flex-direction: row;
}
.flex3box {
width: 33.33%;
margin: 20px;
display: flex;
}
.twobox {
width: 50%;
}
.twobox-flex {
width: 50%;
display: flex;
justify-content: center;
align-items: stretch;
padding: 2vw;
}
.flex2box {
width: 50%;
border: 3px solid #f7f8f8;
padding: 20px 30px;
margin: 10px 20px;
}
.flex2box p {
padding-bottom: 25px;
}
#flex {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
padding: 20px 0 0 0;
align-content: stretch;
flex-direction: row;
}
.services-box {
max-width: 448px;
height: 448px;
text-align: center;
margin: 0 auto;
box-shadow:
2.8px 2.8px 3px rgba(0, 0, 0, 0.042),
6.7px 6.7px 7.2px rgba(0, 0, 0, 0.061),
12.5px 12.5px 13.6px rgba(0, 0, 0, 0.075),
22.3px 22.3px 24.3px rgba(0, 0, 0, 0.089),
41.8px 41.8px 45.5px rgba(0, 0, 0, 0.108),
100px 100px 109px rgba(0, 0, 0, 0.15)
;
background: #313c4c;
padding: 20px;
}
.services-box a {
color: #f7f8f8;
}
.services-box:hover {
transform: scale(1.1);
transition: 500ms linear; 
}
.services-box a:hover {
color: #ff8f9a;
}
nav ul {
display: flex;
}
nav ul li a{
display: block;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: 600;
color: inherit;
}
nav ul li a:hover{
color: #ff8f9a;
}
a {
text-decoration: none;
color: #ff8f9a;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#hero {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/hero.png) top center no-repeat;
min-height: 900px;
}
#hero-text {
padding: 17% 0 3vw 0;
}
#hero-text p {
width: 58%;
padding-bottom: 60px;
}
#services {
padding-top: 40px;
}
a {
text-decoration: none;
}
.button {
background-color: #ff8f9a;
border: 4px solid #ff8f9a;
box-shadow: 0 0 0 3px #313c4c inset;
padding: 0.6vw;
text-align: center;
font-weight: 600;
font-size: 36px;
text-transform: uppercase;
}
a.button {
color: #313c4c;
}
.wp-block-column .button {
margin-top: 20px;
}
.button:hover {
background-color: #f7f8f8;
transition: 0.7s;
}
.ghost-button {
border: 5px double #ff8f9a;
padding: 0.6vw;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
font-size: 36px;
text-transform: uppercase;
}
#hero-text a {
color: #313c4c;
}
.flex2box a {
color: #ff8f9a;
}
.image-border {
position: relative;
z-index: 2;
left: 6vw;
}
.image-border img {
box-shadow: -20px -20px 0 0 #ffebe1;
margin: 20px;
}
.intro-text {
background: #f7f8f8;
z-index: 3;
position: relative;
right: 6vw;
padding: 0 40px 40px 40px;
}
.intro-text p {
color: #313c4c;
padding-bottom: 20px;
}
.intro-text a {
color: #ff8f9a;
}
.intro-text h2 {
color: #313c4c;
padding: 20px 0 10px 0;
}
.intro-text2 {
background: #f7f8f8;
z-index: 3;
position: relative;
right: 6vw;
padding: 0 40px 40px 40px;
}
.intro-text2 p {
color: #313c4c;
padding-bottom: 20px;
}
.intro-text2 a {
color: #313c4c;
}
.intro-text2 h2 {
color: #313c4c;
padding: 20px 0 10px 0;
}
.featured-image {
position: relative;
display: block;
}
.featured-image h1 {
background: rgb(34,33,31,0.3);
background-size: 100% 100%;
padding: 20px 40px;
margin: 0 15px;
display: block;
max-width: 100%;
}
.image {
position: absolute;
width: 100%;
height: 100%;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
top: 0;
left: 0;
color: inherit;
}
#references {
padding-top: 40px;
}
#help {
padding-top: 40px;
}
#intro {
margin: 0 auto;
padding-top: 60px;
}
.check {
float: left;
margin-right: 10px;
}
.service-text p:first-of-type {
margin-top: 0;
}
#pagebox {
border: 3px solid #f7f8f8;
padding: 20px 30px 35px 30px;
margin: 10px 20px 20px 20px;
align-items: stretch;
}
#pagebox a {
color: #313c4c;
}
#pagebox p:last-of-type {
padding-bottom: 20px;
}
#pagebottom {
margin-bottom: 50px;
}
.packlist li {
list-style: circle;
padding: 6px;
font-size: 24px;
font-weight: 500;
}
.packlist {
padding: 20px; 
}
.pack {
background-color: rgba(244,172,165,0.7);
padding: 20px;
margin: 30px 0;
}
#select {
padding: 0.5vw 0;
}
#offer {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/ajanlat.jpg) no-repeat;
height: auto;
margin-top: 60px;
}
#offer-text {
text-align: center;
}
#offer-form {
max-width: 700px;
margin: 0 auto;
text-align: left;
}
#offer-form input {
width: 100%;
height: 40px;
padding: 12px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
border: solid 1px rgba(0, 0, 0, 0.2);
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
#offer-form input[type="submit"] {
width: 100%;
height: 50px;
color: #313c4c;
font-family: inherit;
cursor: pointer;
background-color: #ff8f9a;
border: 4px solid #ff8f9a;
box-shadow: 0 0 0 3px #313c4c inset;
padding: 2px 0 5px 0;
text-align: center;
font-weight: 600;
font-size: 30px;
text-transform: uppercase;
}
#offer-form textarea {
width: 100%;
height: 100px;
padding: 0 10px;
border: solid 1px rgba(0, 0, 0, 0.2);
margin: 0 0 10px 0;
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
resize: vertical;
}
#offer-form input[type="checkbox"] {
max-width: 20px;
height: 20px;
padding: 0 10px;
margin: 0 10px 0 0;
border: solid 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
font-size: 16px;
display: inline-block;
background: #fff; 
}
#offer-form input[type="checkbox"]:checked {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/check.svg) no-repeat;
background-size: cover;
max-width: 20px;
height: 20px;
margin: 0 auto;
} 
#offer-form a {
color: #ff8f9a;
}
#large-form {
border-top: 2px solid #f7f8f8;
max-width: 900px;
}
#large-form a {
color: #ff8f9a;
}
#large-form input {
width: 100%;
height: 40px;
padding: 12px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
border: solid 1px rgba(0, 0, 0, 0.2);
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
#large-form input[type="submit"] {
width: 100%;
height: 50px;
color: #313c4c;
font-family: inherit;
cursor: pointer;
background-color: #ff8f9a;
border: 4px solid #ff8f9a;
box-shadow: 0 0 0 3px #313c4c inset;
padding: 2px 0 5px 0;
text-align: center;
font-weight: 600;
font-size: 30px;
text-transform: uppercase;
}
#large-form textarea {
width: 100%;
height: 100px;
padding: 0 10px;
border: solid 1px rgba(0, 0, 0, 0.2);
margin: 0 0 10px 0;
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
resize: vertical;
}
#large-form input[type="checkbox"] {
max-width: 20px;
height: 20px;
padding: 0 10px;
margin: 0 10px 0 0;
border: solid 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
font-size: 16px;
display: inline-block;
background: #fff; 
}
#large-form input[type="checkbox"]:checked {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/check.svg) no-repeat;
background-size: cover;
max-width: 20px;
height: 20px;
margin: 0 auto;
}
#opinions {
padding-top: 40px;
}
.check-text p:first-of-type {
margin-top: 0;
}
.help-box {
padding: 10px;
}
.formflex{
display: flex;
}
.halfform {
width: 50%;
}
.slide2 {
background: #f7f8f8;
padding: 20px;
margin: 0 auto;
color: #313c4c;
}
.blog-box {
max-width: 541px;
box-shadow:
2.8px 2.8px 3px rgba(0, 0, 0, 0.042),
6.7px 6.7px 7.2px rgba(0, 0, 0, 0.061),
12.5px 12.5px 13.6px rgba(0, 0, 0, 0.075),
22.3px 22.3px 24.3px rgba(0, 0, 0, 0.089),
41.8px 41.8px 45.5px rgba(0, 0, 0, 0.108),
100px 100px 109px rgba(0, 0, 0, 0.15)
;
background: #313c4c;
padding: 20px;
margin: 0 auto;
}
.blogshadow-box {
box-shadow:
2.8px 2.8px 3px rgba(0, 0, 0, 0.042),
6.7px 6.7px 7.2px rgba(0, 0, 0, 0.061),
12.5px 12.5px 13.6px rgba(0, 0, 0, 0.075),
22.3px 22.3px 24.3px rgba(0, 0, 0, 0.089),
41.8px 41.8px 45.5px rgba(0, 0, 0, 0.108),
100px 100px 109px rgba(0, 0, 0, 0.15)
;
background: #313c4c;
padding: 20px;
margin: 0 auto;
}
.blogshadow-box p:first-of-type {
margin-top: 0;
}
.blog-box a {
color: #f7f8f8;
}
.blogshadow-box a {
color: #f7f8f8;
}
#blog {
padding-bottom: 80px;
padding-top: 40px;
}
#referencia-box {
padding-top: 20px;
}
#referencia-box .flex {
flex-wrap: wrap;
}
#referencia-box .twobox {
padding-bottom: 30px;
display: flex;
}
#referencia-box .blog-box {
max-width: 600px;
}
footer {
background-color: #ffebe1;
color: #313c4c;
padding-bottom: 30px;
}
#rights ul li a {
padding-left: 1rem;
}
#rights li a:hover {
color: #ff8f9a;
}
#rights ul {
margin: 15px 0 0 0;
}
.tel {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/tel.png) no-repeat;
background-size: 20px auto;
}
.email {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/email.png) no-repeat;
background-size: 20px auto;
}
.nyil {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/nyil.svg) no-repeat;
background-size: 10px auto;
}
#infos ul li a {
padding-left: 2rem;
}
#infos li a:hover {
color: #ff8f9a;
}
#infos ul {
margin: 15px 0 0 0;
}
footer a {
text-decoration: none;
color: #313c4c;
}
footer .flex-container {
justify-content: center;
align-items: stretch;
}
#copyright {
color: #313c4c;
text-align: center;
padding: 15px;
background: #ffebe1;
font-size: 14px;
}
.icons {
margin-right: 20px;
}
.icons-flex {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
padding: 20px 0;
}
#social ul {
margin: 15px 0 0 0;
}
#social ul li a {
display: inline-block;
width: 60px;
height: 60px;
margin-right: 10px;
float: left;
background-size: 60px auto;
}
.text {
margin: 0 auto;
}
.slide-text {
padding-top: 10px;
border-top: 1px solid #313c4c;
}
#carousel {
margin-bottom: 30px;
overflow: hidden;
position: relative;
padding: 10px 0 40px 0;
}
#carousel-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
#carousel2 {
margin-bottom: 30px;
overflow: hidden;
position: relative;
padding: 0 0 40px 0;
}
#carousel2-wrap {
max-width: 960px;
overflow: hidden;
position: relative;
margin: 0 auto;
box-shadow: 2px 3px 8px 2px rgb(0 0 0 / 20%);
}
#carousel ul.slides {
display: block;
white-space: nowrap;
font-size: 0;
position: relative;
}
#carousel li.slide {
display: inline-block;
position: relative;
width: 100%;
white-space: initial;
font-size: initial;
}
#carousel li.slide a{
display: block;
color: #313c4c;
}
.left-text {
background: #f7f8f8;
padding-left: 20px;
}
#carousel2 li.slide2 {
display: inline-block;
position: relative;
width: 100%;
white-space: initial;
font-size: initial;
}
#carousel2 li.slide2 a{
display: block;
}
#carousel2 ul.slides {
display: block;
white-space: nowrap;
font-size: 0;
position: relative;
}
#navigation {
display: block;
position: absolute;
width: 100%; 
height: 30px;
bottom: 0;
z-index: 5;
text-align: center;
}
#navigation div {
display: inline-block;
width: 20px; 
height: 20px;
cursor: pointer;
border-radius: 50%;
background: #fff;
margin: 0 10px;
}
#navigation2 {
display: block;
position: absolute;
width: 100%; 
height: 30px;
bottom: 0;
z-index: 5;
text-align: center;
}
#navigation2 div {
display: inline-block;
width: 20px; 
height: 20px;
cursor: pointer;
border-radius: 50%;
background: #fff;
margin: 0 10px;
}
#searchform {
width: 200px;
padding:  5px;
border: solid 1px rgba(0, 0, 0, 0.2);
color: inherit;
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
position: relative;
}
#searchsmall {
width: 150px;
border-radius: 4px;
top: 5px;
left: 10px;
background: #d0d4d8;
}
#searchform input[type="text"] {
border: none;
height: 30px;
}
#searchform input[type="submit"] {
border: none;
height: 30px;
width: 30px;
position: absolute;
top: 5px;
right: 5px;
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/nagyito.png)center center no-repeat;
}
#go-to-top {
background: #ff8f9a;
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
cursor: pointer;
}
#go-to-top:before {
position: absolute;
top: 50%;
left: 50%;
content: "";
margin-top: -6px;
margin-left: -7px;
width: 0; 
height: 0; 
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #313c4c;
}
.nav-active {
border: solid 3px #ff8f9a;
}
.hamburger {
display: none;
}
.widget a {
color: #f7f8f8;
}
.margin-plus {
margin-top: 10px;
}
#archives-dropdown-2 {
padding: 5px;
border: solid 1px rgba(0, 0, 0, 0.2);
color: #313c4c;
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
border-radius: 4px;
background: #d0d4d8;
}
.text-align {
text-align: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 5vw;
}
#form-altalanos {
max-width: 900px;
background-color: #313c4c;
box-shadow: 2px 3px 8px 2px rgb(0 0 0 / 20%);
color: #f7f8f8;
font-family: inherit;
font-size: inherit;
padding: 3vw;
margin: 0 auto;
margin-bottom: 4vw;
}
#form-altalanos a {
color: #ff8f9a;
}
#form-altalanos input {
width: 100%;
height: 40px;
padding: 12px;
box-sizing: border-box;
margin-bottom: 1vw;
resize: vertical;
border: solid 1px rgba(0, 0, 0, 0.2);
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
#form-altalanos input[type="submit"] {
width: 100%;
height: 50px;
color: #313c4c;
font-family: inherit;
cursor: pointer;
background-color: #ff8f9a;
border: 4px solid #ff8f9a;
box-shadow: 0 0 0 3px #313c4c inset;
padding: 2px 0 5px 0;
text-align: center;
font-weight: 600;
font-size: 30px;
text-transform: uppercase;
}
#form-altalanos input[type="submit"]:hover {
background-color: #f4aca5;
transition: 0.7s;
}
#form-altalanos textarea {
width: 100%;
max-height: 150px;
padding: 0 10px;
border: solid 1px rgba(0, 0, 0, 0.2);
margin-bottom: 1vw;
font-family: inherit;
font-size: inherit;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
resize: vertical;
}
#form-altalanos input[type="checkbox"] {
max-width: 20px;
height: 20px;
padding: 0 10px;
border: solid 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
font-size: 16px;
display: inline-block;
background: #fff; 
margin: 0;
}
#form-altalanos input[type="checkbox"]:checked {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/check.svg) no-repeat;
background-size: cover;
max-width: 20px;
height: 20px;
margin: 0 auto;
margin-right: 10px;
}
#form-altalanos input[type="radio"] {
max-width: 20px;
height: 20px;
padding: 0 10px;
border: solid 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
font-size: 16px;
display: inline-block;
background: #fff; 
margin: 0;
}
#form-altalanos input[type="radio"]:checked {
background: url(//pixelemur.hu/wp-content/themes/basic-theme/img/check.svg) no-repeat;
background-size: cover;
max-width: 20px;
height: 20px;
margin: 0 auto;
margin-right: 10px;
}
.select {
margin-bottom: 1vw;
}
@media only screen and (max-width: 1140px) {
.center-box {
width: 100%;
padding: 0 10px;
}
nav ul {
display: none;
}
nav ul li a{
display: block;
padding: 2vw 12vw 1vw 0;
text-align: right;
}
.hamburger {
display: block;
float: right;
padding-top: 10px;
}
.hamburger .line{
width: 50px;
height: 5px;
background-color: #ff8f9a;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger:hover{
cursor: pointer;
}
#hamburger-1.is-active .line:nth-child(1){
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-1.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px);
-ms-transform: translateY(-13px);
-o-transform: translateY(-13px);
transform: translateY(-13px);
}
}
@media only screen and (max-width: 768px) {
#services {
padding-top: 0;
}
#offer-form {
padding: 10px;
}
.flex-container {
display: block;
}
footer .flex-container {
padding: 20px 10px 0 10px;
}
.flex3box {
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
display: block;
}
.flex {
display: block;
padding: 20px 10px 0 10px;
}
.flex2box {
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
padding: 15px 20px;
}
.twobox {
width: 100%;
margin-bottom: 20px;
}
.twobox-flex {
width: 100%;
margin-bottom: 20px;
display: block;
}
.services-img {
}
aside {
float: none;
width: 100%;
}
main {
float: none;
width: 100%;
}
#hero {
background-position: bottom 25% left 85%;
background-size: 300% auto;
}
#hero-text p {
width: 100%;
padding-bottom: 20px;
}
#hero-text p:first-of-type {
margin-top: 0;
}
#hero-text {
padding: 2% 10px 30px 10px;
}
#hero-text h1 {
padding: 0 0 15px 0;
}
.button {
box-shadow: 0 0 0 2px #313c4c inset;
padding: 2vw;
font-size: 28px;
}
.ghost-button {
padding: 2vw;
font-size: 28px;
}
.image-border {
left: 0;
}
.intro-text {
right: 0;
padding: 0 20px 20px 20px;
}
.intro-text2 {
right: 0;
}
.blog-box {
padding: 10px;
}
#navigation2 div {
width: 15px;
height: 15px;
}
#navigation div {
width: 15px;
height: 15px;
}
#logo {
padding: 0 0 15px 10px;
max-width: 250px;
float: left;
}
.packlist li {
font-size: 20px;
}
#pagebox {
margin: 0 0 20px 0;
}
#large-form {
padding: 0 10px;
}
.inner-page {
margin-bottom: 30px;
}
}
@media only screen and (max-width: 540px)  {
.hamburger {
margin-top: 50px;
padding-top: 0;
}
nav ul li a {
padding: 4vw 19vw 1vw 0;
}
nav ul:first-of-type {
padding-top: 14vw;
}
}