:root {
    --cucc-orange: #fc7c01;
    --cucc-darkgray: #4f4f4f;
    --cucc-blue: #0181fc;
    --cucc-main-font: "Antipasto Pro";
    --cucc-black: #424242;
    --cucc-ivory: #EEE;
}

@font-face {
    font-family: "Antipasto Pro";
    src: url(../font/antipasto-pro-regular.ttf);
}
@font-face {
    font-family: "Antipasto Pro";
    src: url(../font/antipasto-pro-bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: "Antipasto Pro";
    src: url(../font/antipasto-pro-light.ttf);
    font-weight: light;
}
.material-symbols-rounded {
    font-variation-settings:
     'FILL' 1,
     'wght' 400,
     'GRAD' 0,
     'opsz' 24
}
.robfont{
    font-family: "Roboto", Sans-serif;
    font-size: 22px;
    font-weight: 100;
    line-height: 1.66em;
}
.altfont{
    font-family: "Antipasto Pro", Sans-serif;
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.italic{
    font-style: italic;
}
img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a, a:visited, a:active, a:hover {
    text-decoration: none;
}

body, html {
    font-family: Arial, sans-serif;
    scroll-behavior: smooth;
    color: var(--cucc-black);
}
.sparse{
    margin-bottom: 3vh;
    margin-top: 3vh;
}
.sparse-lines{
    line-height: 50px;
}
.after-8{
    margin-bottom: 8vh;
}
.strong, strong,
.faq-question{
    font-weight: bold;
}
.small{
    font-size: 14pt;
}
.c-wrap{
    max-width: 900px;
}
.c-wrap2{
    max-width: 1024px;
    margin: 0 auto;
}
.dim{
    color: var(--cucc-darkgray);
}
ol, ul{
    text-align: left;
    margin-left: 3em;
}
.ticklist ul{
    list-style-type: none;
}
.ticklist ul>li{
    text-indent: 1.5em hanging;
}
.ticklist ul>li:before{
    content: '✔';
    margin-right: 0.5em;
}
.center{
    text-align: center;
    margin: 0 auto;
}
.align-left{
    text-align: left;
}

h1{
    font-family: "Antipasto Pro", Sans-serif;
    font-size: 52px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 2vh;
    min-height: 2vh;
}
h2{
    font-family: "Antipasto Pro", Sans-serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 2vh;
}
.parallax {
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: top;
}
.parallax.p1{
    background-image: url('../img/cuccmegorzo-header-1.jpg');
    background-position:top;
    color: white;
}
.p1-spacer{
    min-height: 75vh;
    position: relative;
}
.p1-spacer>.arrow{
    bottom:0;
    position: absolute;
}
.parallax.p2, .parallax.p3{
    background-image: url('../img/cuccmegorzo-bcg-alt.png');
    background-size: 45%;
    background-repeat: repeat;
    background-position: left top;
}
.parallax.p2{
    background-color: white;
}
.parallax.p3 {
    background-color: #003a7f;
    color: white;
    min-height: 85vh;
}
.overlay-p3{
    width: 100%;
    height: 85vh;
    background-color: transparent;
    background-image: linear-gradient(140deg, #66b4d6 0%, #2727e5 49%);
    opacity: 0.7;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.parallax.p3 h1{
    color: white;
}
.ccontent-parallax{
    position: absolute;
}
.ccontent-p2 .ccol-left{
    max-width: 700px;
}
.p3 .ccontent-parallax{
    margin-top: 16vh;
}
.ccontent {
    min-height: 100vh;
    padding: 100px 20px;
    background: white;
    color: #333;
    text-align: center;
}
.c1{
    padding: 0;
}
.c1 svg,
.prefooter svg{
    height: 90px;
    position: relative;
    left: -40px;
    fill: white;
}
.c1 svg{
    transform: scaleY(-1); /* upside-down */
    top: -90px;
}
.ccontent.c2{
    background: var(--cucc-orange);
    color: white;
}
.ccontent.c4{
    min-height: 70vh;
}

.ccontent.c7{
    padding-top: 0;
    min-height: 70vh;
}
.p3{
    padding: 0;
    margin: 0;
}
.prefooter svg{
    top: 0;
    fill: white;
    display: block;
    left: 0 !important;
    width: 100%;
    /* TODO */
}

.parallax.footer, .parallax.prefooter{
    min-height: 10vh;
    color: white;
}
.crows{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.ccrows-left{
    align-items: flex-start;
}

.ccols{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.ccols-left{
    justify-content: flex-start;
}
.ccols-tight{
    justify-content: center;
}
.ccols-tight>div{
    margin: 10px;
}
.ccol{
    flex-direction: column;
}
.crow{
    flex-direction: row;
}
.card{
    width: 300px;
}
.card-big{
    width: 700px;
    background-color: white;
    padding: 3em 0;
    color: var(--cucc-black);
    border-radius: 5px;
}
.b-link{
    margin: 1em;
}
.button{
    background-color: var(--cucc-orange);
    font-family: var(--cucc-main-font), Sans-serif;
    font-size: 22px;
    line-height: 28px;
    font-weight: bold;
    fill: white;
    color: white;
    box-shadow: 0px 0px 47px -16px rgba(0, 0, 0, 0.5);
    border-radius: 50px 50px 50px 50px;
    padding: 20px 70px 020px 070px;
    height: 62px;
}
.button.button2{
    background-color: var(--cucc-blue);
}
.button.button3 {
    background-color: var(--cucc-darkgray);
}
.button.button4{
    background-color: white;
    color: var(--cucc-black);
}
.button:hover{
    background-color: var(--cucc-darkgray);
    color: white;
}
.button a,
.button a:visited,
.button a:active,
.footer a,
.footer a:visited,
.footer a:active{
    text-decoration: none;
    color: white;
}

.header{
    margin: 1vh;
    height: 150px;
    max-width: 1024px; /* TODO */
    width: 100%;
    align-items: center;
}

.arrow {
    position: relative;
    display: block;
    text-align: center;
    cursor: default;
}
.orange-icon {
    color: var(--cucc-orange);
}
.motto-orange{
    color: var(--cucc-orange);
    margin-bottom: 0.5em;
}
.arrow>span{
    font-size: 64px;
}
.card-icon{
    margin-bottom: 1vh;
}
.card-icon>span{
    font-size: 72px;
}
.card h2{
    margin-bottom: 2vh;
}

#map {
    flex: 1; /* kitölti a rendelkezésre álló helyet */
    min-height: 0; /* ez fontos! */
    height: 600px;
    width: 1000px;
    border-radius: 15px;
}

/** animations **/

.bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.fade-anim{
    opacity: 0;
}
.fade-in {
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.fade-in-2 {
    transform: translateY(30px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.fly-from-left{
    transform: translateX(-500px);
    transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
}
.fly-from-right{
    transform: translateX(500px);
    transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
}
.fly-from-bottom{
    transform: translateY(500px);
    transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
}
.fade-anim.visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}