* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

body {
    background: #f4f4f4;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

html {
    scroll-behavior: smooth;
}

.main-image {
    background: #ffffff url("../images/kicsi_kutya_fal.jpg") 0% 0% / cover;
    height: 700px;
    margin-bottom: 70px;
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.flex-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-no-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 20px;
}

.text {
    font-size: 1.3em;
    color: rgba(70, 70, 70, 0.88);
    line-height: 1.7em;
}

/*.column-first {*/
/*width: 26%;*/
/*line-height: 4em;*/
/*}*/

/*.column-first > span {*/
/*border-bottom: 5px solid #0c0c0c;*/
/*padding-top: 10px;*/
/*padding-right: 50px;*/
/*font-size: 3em;*/
/*color: #0c0c0c;*/
/*}*/

/*.column-second {*/
/*width: 44%;*/
/*padding-top: 30px;*/
/*}*/

.column-big {
    width: 48%;
}

.column-small {
    width: 32%;
}

.column-smaller {
    width: 20%;
}

.column-bigger {
    width: 80%;
}

.column-picture {
    width: 20%;
}

.column-half {
    width: 20%;
}

ul.li-icon-none {
    list-style: none;
}

.pl-10 {
    padding-left: 10px;
}

.mt-200 {
    margin-top: 200px;
}

.mr-250 {
    margin-right: 250px;
}

.mb-100 {
    margin-bottom: 100px;
}

.width-70 {
    width: 70%;
}

.white {
    color: white;
}

.rounded-font {
    font-family: 'Titillium Web', sans-serif;
}

.blue {
    color: #0b9eff;
}

.fonts-5em {
    font-size: 5em;
}

.fonts-1-5em {
    font-size: 1.5em;
}

.fontw-600 {
    font-weight: 600;
}

.borderb-3 {
    border-bottom: 3px solid rgba(202, 204, 206, 0.33);
}

.mr-500 {
    margin-right: 500px;
}

.pt-15 {
    padding-top: 15px;
}

.fonts-1-3em {
    font-size: 1.3em;
}

.pt-10 {
    padding-top: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pl-40 {
    padding-left: 40px;
}

.fonts-2-7em {
    font-size: 2.7em;
}

.pb-50 {
    padding-bottom: 50px;
}

.lh- {
    line-height: 1.6em;
}

.border-2 {
    border: 2px solid #ffb213;
}

.p-15 {
    padding: 15px;
}

.pl-15 {
    padding-left: 15px;
}

.br-2 {
    border-right: 2px solid #ffb213;
}

.prl-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.pb-60 {
    padding-bottom: 60px;
}

.yellow {
    background-color: #ffb213;
}

.hcenter {
    text-align: center;
}

.vcenter {
    align-items: center;
}

.prl-5 {
    padding-right: 5px;
    padding-left: 5px;
}

.bb-2 {
    border-bottom: 2px solid white;
}

.pb-5 {
    padding-bottom: 5px;
}

.yellow-color {
    color: #ffb213;
}

.fonts-0-8em {
    font-size: 0.8em;
}

.line-height-1-5em {
    line-height: 1.5em;
}

.fonts-3em {
    font-size: 3em;
}

.pr-20 {
    padding-right: 20px;
}

.border-radius-30 {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.justified {
    text-align: justify;
}

.white-background {
    background-color: white;
}

.width-550 {
    width: 550px;
}

.pt-25 {
    padding-top: 25px;
}

.text-align-right {
    text-align: right;
}

.fonts-1-2em {
    font-size: 1.2em;
}

.line-height-1-3em {
    line-height: 1.3em;
}

.grey {
    color: #727272;
}

.abril {
    font-family: 'Abril Fatface', cursive;
}

.mt-100 {
    margin-top: 100px;
}

.pr-50 {
    padding-right: 50px;
}

.mr-100 {
    margin-right: 100px;
}

.text-align-left {
    text-align: left;
}

.pl-25 {
    padding-left: 25px;
}

.width-80pc {
    width: 80%;
}

.ml-20pc {
    margin-left: 20%;
}

.ml-5pc {
    margin-left: 5%;
}

.mr-50 {
    margin-right: 50px;
}

.pt-50 {
    padding-top: 50px;
}

.fonts-3-5em {
    font-size: 3.5em;
}

.fonts-2em {
    font-size: 2em;
}

.circle-image {
    border-radius: 50%;
}

.height-200 {
    height: 200px;
}

.prl-70 {
    padding-left: 70px;
    padding-right: 70px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-20 {
    margin-bottom: 20px;
}

.fonts-1em {
    font-size: 1em;
}

.height-40 {
    height: 40px;
}

.border-2-blue {
    border: 2px solid #0b9eff;
}

.p-icon {
    padding: 10px 15px 10px 15px;
}

.p-icon-circle {
    padding: 10px;
}

.p-icon-circle-2 {
    padding: 9px 10px 9px 10px;
}

.p-icon:hover,
.p-icon-circle-2:hover,
.p-icon-circle:hover {
    color: white;
    border-color: white;
    background-color: #0b9eff;
}

.effect3 {
    position: relative;
}

.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect5 {
    position: relative;
}

.effect5:before, .effect5:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 35px 20px #777;
    -moz-box-shadow: 0 35px 20px #777;
    box-shadow: 0 35px 20px #777;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.effect5:after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto;
}

.border-7-grey {
    border: 7px solid #d7d7d7;
}

.vbottom-hcenter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.prl-40 {
    padding-right: 40px;
    padding-left: 40px;
}

.b-image {
    background: white url("../images/background.jpg") 0% 0% / cover;
}

.column {
    width: 20%;
}

.row {
    display: flex;
    align-items: stretch;
    flex-direction: row;
}

.mt-50 {
    margin-top: 50px;
}

.borderb-5-blue {
    border-bottom: 5px solid #0b9eff;
}

.height-150 {
    height: 150px;
}

.width-100pc {
    width: 100%;
}

.mt-150 {
    margin-top: 150px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mymove {
    position: relative;
}

.mymove:hover {
    -webkit-animation: mymove 0.3s 2; /* Safari 4.0 - 8.0 */
    animation: mymove 0.4s 2;
}

@keyframes mymove {
    0% {
        top: 0px;
        left: 0px;
    }
    25% {
        top: 0px;
        left: 5px;
    }
    50% {
        top: 0x;
        left: 0px;
    }
    75% {
        top: 0x;
        left: -5px;
    }
    100% {
        top: 0px;
        left: 0px;
    }
}

.mb-0 {
    margin-bottom: 0;
}

.pt-80 {
    padding-top: 80px;
}

.borderb-3grey {
    border-bottom: 3px solid #d7d7d7;
}

.dark-grey {
    color: #4b4b4b;
}

.pl-37 {
    padding-left: 37px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-28 {
    margin-bottom: 28px;
}

.height-100-width-100 {
    height: 100px;
    width: 100px;
}

.container {
    position: relative;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {
    border-radius: 10px;
    background-color: #0b9eff;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

.inline-block {
    display: inline-block;
}

.ml-50 {
    margin-left: 50px;
}

.pt-5 {
    padding-top: 5px;
}

.height-70-width-70 {
    height: 70px;
    width: 70px;
}

.anchor {
    display: block;
    height: 80px; /*same height as header*/
    margin-top: -80px; /*same height as header*/
    visibility: hidden;
}

a {
    text-decoration: none;
}

.boxshadow {
    box-shadow: 0px 10px 5px rgba(229, 229, 229, 0.9);
}

.black > a {
    color: #313131;
}

.black > a:hover {
    color: #0b9eff;
}

.fonts-1-4em {
    font-size: 1.4em;
}

.mozaik {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.mozaik:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-size: 2em;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}