@import url(https://fonts.googleapis.com/css?family=Open+Sans);



body {

    background-image: linear-gradient(to right top, #a6b828 0%, #7bad07 100%);

}



main {

    min-height: 50vh;

    width: 75%;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    box-sizing: border-box;

}



nav {

    max-width: 1060px;

    mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);

    margin: 0 auto;

    padding: 10px 0;

}



    nav ul {

        text-align: center;

        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);

        box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);

    }



        nav ul li {

            display:inline-block;

            background: #055388;

            border: 1px solid white;

            font-size: 0.7em;

            color: white;

            font-weight: 700;

            letter-spacing: 5px;

            text-transform: uppercase;

        }



            nav ul li a {

                padding: 15px;

                font-family: "Open Sans";

                text-transform: uppercase;

                font-size: 12px;

                color: white;

                text-decoration: none;

                display: block;

                transition: 0.5s;

            }



                nav ul li a:hover {

                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);

                    background: rgba(173,216,230, 0.8);

                    color: rgba(0, 35, 122, 0.7);

                    transition:0.5s;

                }



@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");



.perspective h2 {

    width: 100%;

    justify-content:center;

    font-family: "Open Sans";

    background-color: rgba(255, 255, 255, 0.6);

    color: #2b2c48;

    font-size: 30px;

    transition: 0.5s;

    font-weight:700;

}

    .perspective h2:hover {

        justify-content:center;

        font-family: "Open Sans";

        color: #2b2c48;

        font-size: 32px;

        font-weight:700;

        transition: 0.5s;

        cursor: pointer;

    }



.perspective{

   text-align:center;

}



.main-image{

    float:left;

    position:absolute;

    width:75%;

    margin-bottom:0px;

}



.centered {

    position: relative;

    text-align: center;

    font-family: 'Pacifico', cursive;

    color: yellow;

    font-size: 5vh;

    margin: 2px 0 0;

    -webkit-text-stroke: 2px black;

    font-weight:700;

}

.desc-small {

    width: 18vw;

    margin-left: -3vw;

    position: absolute;

    text-align: right;

    font-family: "Open Sans";

    color: #055388;

    font-size: 3vw;

    font-weight: 700;

    /*    -webkit-text-stroke: 1px black;*/

    letter-spacing: 4px;

    text-shadow: 2px 2px #000000;

}



.header-wrapper {

    width: 25%;

    float:right;

}



.profile-wrapper{

    justify-content:center;

}



#profile {

    border-radius: 25px;

    background: linear-gradient(90deg, #055388 50%, rgb(5, 83, 136, 0) 50%);

    margin: 0 auto;

    width: 75%;

    border: 5px solid #055388;

    margin-top: 20px;

    clear: left;

    color: #2b2c48;

    font-family: "Jost", sans-serif;

    background-size: cover;

    /*    background-position: center;*/

    /*    background-attachment: fixed;*/

    /*    min-height: 70vh;*/

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    box-sizing: border-box;

}



.image-small {

    max-height: 280px;

    margin: 20px;

}



.card {

    max-width: 200px;

    max-height: 210px;

    min-width: 180px;

    margin: 20px;

    overflow-y: auto;

    position: relative;

    z-index: 1;

    overflow-x: hidden;

    background-color: white;

    display: flex;

    transition: 0.3s;

    flex-direction: column;

    border-radius: 10px;

    box-shadow: 0 0 0 8px rgba( 5, 83, 136, 1);

}

.card-header {

    position: relative;

    display: flex;

    height: 180px;

    flex-shrink: 0;

    width: 100%;

    transition: 0.3s;

}



    .card-header * {

        transition: 0.3s;

    }





.card-cover {

    width: 100%;

    height: 100%;

    position: absolute;

    height: 200px;

    left: 0;

    will-change: top;

    background-size: cover;

    transition: 0.5s;

}



.button-contact{

    width:100%;

    position:relative !important;

    justify-content:center;

}



.card-fullname {

    position: absolute;

    bottom: -10px;

    font-size: 18px;

    font-weight: 700;

    text-align: center;

    white-space: nowrap;

    transform: translateY(-10px) translateX(-50%);

    left: 50%;

}



.card-jobtitle {

    background-color: rgba(255, 255,255, 0.8);

    position: absolute;

    bottom: -10px;

    font-size: 10px;

    white-space: nowrap;

    font-weight: 700;

    opacity: 0.7;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: black;

    margin: 0;

    left: 50%;

    transform: translateX(-50%) translateY(-7px);

}



.card-main {

    position: relative;

    flex: 1;

    display: flex;

    padding-top: 10px;

    flex-direction: column;

}



.name-and-job {

    margin-top: 55px;

    position: relative;

    color: black;

    font-size: 145%;

}



.citate {

    font-family: "Pacifico", sans-serif;

    margin-top: 5vh;

    margin-right:3vw;

    max-width: 40vh;

}

.citate-desc {

    margin: 5px !important;

    line-height: 1.6;

    color: black;

    font-size: 18px;

    margin: 0;

    font-weight: 400;

}

.card-subtitle {

    font-weight: 700;

    font-size: 13px;

    margin-bottom: 8px;

}



/*.card-content {

}*/



.card-desc {

    width:180px;

    line-height: 1.6;

    color: black;

    font-size: 14px;

    margin: 0;

    font-weight: 400;

}



.card-desc-bold {

    margin-top: 5vh !important;

    text-align: center;

    line-height: 1.6;

    color: black;

    font-size: 4vh;

    margin: 0;

    font-weight: 400;

    font-family: "Pacifico", sans-serif;

}



.img-small-wrapper {

    background-color: #055388;

    justify-content:center;



}



.img-desc {

    margin-left:3vw !important;

    text-align: center;

    max-width: 350px;

    background-color: #055388;

    line-height: 1.6;

    color: black;

    font-size: 14px;

    margin: 0;

    font-weight: 400;

    font-family: "Pacifico", sans-serif;

}



#work {

    margin: 0 auto;

    width: 90%;

    margin-top:20px;

    font-family: "Varela Round", sans-serif;

    color: #fff;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

}



#top {

    width:40%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    margin: 20px;

    border: 3px solid #055388;

    border-radius: 15px;

}



.individual{

    background-image: url(images/FotkyFoto_125878520_M.jpg);

    background-size: cover;

}

.skupinove{

    background-image: url(images/FotkyFoto_442002596_M.jpg);

    background-size: 100% auto;

}

.diety{

    background-image: url(images/FotkyFoto_160465116_M.jpg);

    background-size: 100% auto;

}

.plan{

    background-image: url(images/FotkyFoto_125027318_M.jpg);

    background-size: 100% auto;

}

.deti{

    background-image: url(images/FotkyFoto_218473150_M.jpg);

    background-size: 100% auto;

}

.skolenia{

    background-image: url(images/FotkyFoto_163714576_M.jpg);

    background-size: 100% auto;

}





.work-card {

    width: 170px;

    height: 100px;

    margin: auto;

    box-shadow: 0 70px 63px -60px #494848;

    transform-style: preserve-3d;

    transition: transform 0.05s linear;

}



    .work-card .thumb {

        cursor: pointer;

        background-size: cover;

        height: 100%;

        width: 100%;

        border-radius: 15px;

        transition: 0.5s;

    }



        .work-card .thumb:hover {

            transform: scale(1.1);

            transition: 0.5s;

            border-radius: 0px;

            z-index: -1;

        }



    .work-card h2 {

        position: absolute;

        text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

        color: white;

        top: 0;

        left: -60px;

        /*font-size: 40px;*/

        font-weight: 100;

        transform: translateZ(80px);

    }



    .work-card span {

        position: absolute;

        bottom: 40px;

        right: -280px;

        font-size: 37px;

        font-weight: 600;

        transform: translateZ(35px);

    }



img {

    margin: auto;

    display: block;

    border-radius: 15px;

}





@import url("https://fonts.googleapis.com/css?family=Mukta:700");



#btn-container{

    display:flex;

    justify-content:center;

}



.learn-more {

    position: absolute;

    bottom: 5px;

    display: inline-block;

    cursor: pointer;

    outline: none;

    border: 0;

    vertical-align: middle;

    text-decoration: none;

    background: transparent;

    padding: 0;

    font-size: inherit;

    font-family: inherit;

}



    .learn-more {

        width: 10rem;

        height: auto;

    }



        .learn-more .circle {

            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

            position: relative;

            display: block;

            margin: 0;

            width: 2rem;

            height: 2rem;

            background: #282936;

            border-radius: 1.625rem;

        }



            .learn-more .circle .icon {

                transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

                position: absolute;

                top: 0;

                bottom: 0;

                margin: auto;

                background: #fff;

            }



                .learn-more .circle .icon.arrow {

                    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

                    left: 0.1rem;

                    width: 1.125rem;

                    height: 0.125rem;

                    background: none;

                }



                    .learn-more .circle .icon.arrow::before {

                        position: absolute;

                        content: "";

                        top: -0.25rem;

                        right: 0;

                        width: 0.625rem;

                        height: 0.625rem;

                        border-top: 0.125rem solid #fff;

                        border-right: 0.125rem solid #fff;

                        transform: rotate(45deg);

                    }



        .learn-more .button-text {

            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

            position: absolute;

            top: 0;

            left: 0;

            right: -10px;

            bottom: 5px;

            padding: 0.33rem 0;

            margin: 0 0 0 2.0rem;

            color: #282936;

            font-weight: 300;

            line-height: 1;

            text-align: center;

            text-transform: uppercase;

        }



    .learn-more:hover .circle {

        width: 110%;

    }



        .learn-more:hover .circle .icon.arrow {

            background: #fff;

            transform: translate(1rem, 0);

        }



    .learn-more:hover .button-text {

        color: #fff;

    }



@supports (display: grid) {



    #btn-container {

        grid-area: main;

        align-self: center;

        justify-self: center;

    }

}



#social {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

    transform: scale(0.8);

}



#social {

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    justify-content: center;

    align-content: center;

    width: 100%;

    height: auto;

    font-size: 1rem;

}



li {

    list-style: none;

}



a {

    color: #69c;

    text-decoration: none;

    cursor: pointer;

}



/* stylesheets

---------------------------- */

.yek-social {

    width: 50%;

    height: 100px;

    /* animaitons

  ------------------------- */

}



.yek-social__list, .yek-social__item, .yek-social__link, .yek-social__button {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;

    align-content: center;

}



.yek-social__list, .yek-social__link {

    display:flex;

    justify-content:center;

    width: 100%;

    height: 100%;

}



.yek-social__list {

    border-radius: 9px;

    padding: 9px;

    justify-content: space-between;

}



.yek-social__item {

    border-radius: 9px;

    width: 24%;

    height: 100%;

}



.yek-social__button {

    width: 72px;

    height: 72px;

    background-color: #fff;

    box-shadow: -20px 20px 5px rgba(68, 68, 68, 0.5);

    transition: 0.5s 0.15s;

}



.yek-social__button {

    position: relative;

    transform: perspective(1000px) rotate(-25deg) skew(25deg);

}



    .yek-social__button::before, .yek-social__button::after {

        content: "";

        position: absolute;

    }



    .yek-social__button::before {

        width: 21px;

        height: 100%;

        top: 10px;

        left: -20px;

        background-color: #9f9f9f;

        transition: 0.5s 0.15s;

        transform: rotate(0deg) skewY(-45deg);

    }



    .yek-social__button::after {

        width: 100%;

        height: 21px;

        bottom: -20px;

        left: -10px;

        transition: 0.8s 0.15s;

        background-color: #c3c3c3;

        transform: rotate(0deg) skewX(-45deg);

    }



.yek-social__icon {

    color: #444;

    font-size: 1.7em;

    transition-delay: 0.2s;

}



.yek-social__link:hover .yek-social__icon {

    color: #fff;

}



.yek-social__link:hover .yek-social__button {

    transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(20px, -20px);

}



.yek-social__link:hover .yek-social__button--youtube {

    background-color: #c4302b;

    box-shadow: -50px 50px 20px rgba(196, 48, 43, 0.5);

}



    .yek-social__link:hover .yek-social__button--youtube::before {

        background-color: #d5433e;

    }



    .yek-social__link:hover .yek-social__button--youtube::after {

        background-color: #db5f5b;

    }



.yek-social__link:hover .yek-social__button--facebook {

    background-color: #0088cc;

    box-shadow: -50px 50px 20px rgba(0, 136, 204, 0.5);

}



    .yek-social__link:hover .yek-social__button--facebook::before {

        background-color: #00a0f0;

    }



    .yek-social__link:hover .yek-social__button--facebook::after {

        background-color: #14b1ff;

    }



.yek-social__link:hover .yek-social__button--instagram {

    background-color: #c13584;

    box-shadow: -50px 50px 20px rgba(193, 53, 132, 0.5);

}



    .yek-social__link:hover .yek-social__button--instagram::before {

        background-color: #ce4c95;

    }



    .yek-social__link:hover .yek-social__button--instagram::after {

        background-color: #d668a6;

    }



    svg{

        height:60%;

    }





input {

    width: 94%;

    padding: 8px;

    margin: 8px 0px;

    border: 1px solid #dddddd;

}



textarea {

    width: 94%;

    padding: 8px;

    margin: 8px 0px;

    border: 1px solid #dddddd;

}



input[type="submit"] {

    width: 100%;

    background-color: #3040c4;

    color: white;

    padding: 12px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}

 /*contact form*/

.contact-form {

    margin-left: 30px;

    width: 300px;

}



    .contact-form h1 {

        font-size: 32px;

        font-family: 'Pacifico', sans-serif;

        margin: 0 0 20px;

        text-align: center;

    }



    .contact-form .form-group {

        margin-bottom: 20px;

        width:300px;

    }



    .contact-form .form-control, .contact-form .btn {

        min-height: 38px;

        border-radius: 2px;

    }



    .contact-form .form-control {

        border-color: white;

        background-color: #2b2c48;

        color:white;

    }



        .contact-form .form-control:focus {

            border-color: #d8b012;

            box-shadow: 0 0 8px #000000;

        }



    .contact-form .btn-primary {

        min-width: 300px;

        color: #3498db;

        background: #000;

        border: none;

    }



        .contact-form .btn-primary:hover {

            color: #fff;

        }



        .contact-form .btn-primary i {

            margin-right: 5px;

        }



    .contact-form label {

        opacity: 0.9;

    }



    .contact-form textarea {

        resize: vertical;

    }



.bs-example {

    margin: 20px;

}



.button {

    margin: 20px;

    position: relative;

    background: #055388;

    border: 1px solid white;

    padding: 20px;

    font-size: 0.9em;

    color: white;

    box-shadow: 4px 4px 0px 0px white;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

    transition: all 300ms ease-in-out;

}



    .button:hover {

        left: 4px;

        top: 4px;

        box-shadow: 0 0 0 0 white;

    }



.form-group p {

    font-style: italic;

    color: #1e1a1a;

}



.contact-desc {

    font-family: 'Pacifico', sans-serif;

    font-size: 25px;

    color: black;

    text-align: center;

    font-weight: 700;

}



    .contact-desc span {

        color: #055388;

    }



    .form-contact{

        max-width:200px;

    }



.thumb {

    object-fit: cover;

    width:50%;

}



/****************************/

/*******MOBILE STYLES********/

/****************************/



@media all and (min-width:300px) and (max-width: 850px) {

    body{

        width:100%;

    }

    .main-image {

        width: 80%;

    }

    .desc-small {

        clear:left;

        width: 100%;

        position: absolute;

        text-align: center;

        font-family: "Open Sans";

        color: #055388;

        margin-left:-30px;

        font-size: 10vw;

        font-weight: 700;

        /* -webkit-text-stroke: 1px black; */

        letter-spacing: 2px;

        text-shadow: 2px 2px #000000;

    }

    .header-wrapper {

        float: left;

        margin-top: 20vh;

    }

    .card{

        min-width:60%;

    }

    .card-main {

        position: relative;

        flex: 1;

        display: flex;

        padding-top: 30px;

        margin-bottom:10px;

        flex-direction: column;

    }

    .name-and-job {

        display: flex;

        justify-content: center;

    }

    .citate{

        clear:left;

    }

    #profile {

        background: linear-gradient(180deg, #055388 66%, rgb(5, 83, 136, 0) 30%);

    }

}