/*RESET*/
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}

@font-face {
    font-family:Gilroy;
    src:url("assets/fonts/Radomir Tinkov - Gilroy-Light.otf");
}

@font-face {
    font-family:Gilroy-ExtraBold;
    src:url("assets/fonts/Radomir Tinkov - Gilroy-ExtraBold.otf");
}
html {
    height: 100%;
}
body {
    min-height: 100%;
    overflow: hidden;
}
a{
    text-decoration: none;
}
.container{
    width:100%;
    height: 100%;
}

.container hr{
    width:74.097%;
    height: 9.57%;
    background-color: #C5D6D8;
    position: absolute;
    top:11.23%;
    right:14.54%;
    left:11.3%;
    border: none;
}

.container img:first-of-type{
	height:30%;
    position: absolute;
    z-index:-1;
    /*left:-0.5%;*/
}

.container #logo{
    position: absolute;
    top:40.33%;
    left:12.01%;
    height:10.125%;
}

.container>p{
    /* Copyright */
    width:21.73%;
    height:3.125%;
    position: absolute;
    left: 12.01%;
    top:53.125%;

    /* text */
    font-family: Gilroy;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5vw;
    line-height: 150%;
    /* or 36px */
    color:#1E3231;

    letter-spacing: 0.05em;
}


.container img:nth-of-type(3){
    width:100%;
    position: absolute;
    top:41.27%;
    /*left:-300px;*/
    right: 0px;
    z-index:-1;
}

#mask{
    display: none;
	visibility:hidden;
}

.container .project_card{
    width:26.04%;
    height:43.92%;
    position: absolute;
    right:17.15%;
    top: 33.4%;
    bottom: 22.85%;
    background-color:#FFF8D3;
    z-index:1;
}

.container .project_card #small_line{
    width:11.2%;
    height:2.67%;
    background-color: #1E3231;
    border: none;

    position: absolute;
    left: 74.67%;
    right: 14.13%;
    top: 17.41%;
    bottom: 79.91%;
}

/*Card Title*/
.container .project_card #card_title{
    /* title */
    width:73.81%;
    height: 7.3%;

    position: absolute;
    left: 11.98%;
    right: 14.21%;
    top: 23.44%;
    bottom: 69.2%;

    font-family: Gilroy-ExtraBold;
    font-style: normal;
    font-size: 1.25rem;
    line-height:29px;
    text-align: right;
    letter-spacing: 0.05em;

    color: #1E3231;
}

.project_card #card_description{
    width:75.73%;
    height: 25.89%;
    position: absolute;
    left: 10.03%;
    right: 14.21%;
    top: 34.38%;
    bottom: 39.73%;
    word-wrap: break-word;


    font-family: Gilroy;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 150%;
    /* or 36px */

    text-align:right;
    letter-spacing: 0.05em;

    color: #1E3231;
}
.project_card a{
    width:71.6%;
    height:13.3%;
    padding:1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 13.37%;
    right: 14.21%;
    bottom: 17.86%;
    cursor:pointer;

    /* interactive */

    font-family: Gilroy-ExtraBold;
    font-style: normal;
    font-size: 1.125em;
    line-height: 1.375em;
    text-align: center;
    letter-spacing: 0.05em;

    color: #1E3231;
    background-color: #FFF8D3;
    border: 3px solid #1E3231;
    box-sizing: border-box;

}

footer{
    width:100%;
    height: 40.23%;
    background-color:#1E3231;
    position: absolute;
    top:59.76%;
    bottom:0px;
    left:0px;
    z-index: -1;
}


footer p{
    position: absolute;
    height: 36px;
    left: 12.01%;
    right: 72.08%;
    bottom:8.49%;

    /* text */

    font-family: Gilroy;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 150%;
    /* identical to box height, or 36px */

    letter-spacing: 0em;

    color: #FFF8D3;
}


/*----------------------------------------------MOBILE-------------------------------------------*/
@media only screen and (max-width: 600px) {
    body{
        overflow-y:scroll;
    }

    .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

    .container hr{
        position: absolute;
        width: 100%;
        height:11.2%;
        left: 0px;
        top: 0px;
    }

    .container img:first-of-type{
        position: absolute;
        width:100%;
        height:22.11%;
        left: 0px;
        top:11.2%;
    }

    .container #logo{
        width:74.13%;
        height:10.34%;
        top:46.9%;
        left:13.33%;
        right:13.33%;
    }


    .container>p{
        text-align: center;
        width:73.8%;
        height: 2.6%;
        position: absolute;
        top:61.46%;
        left:12%;
        right:14.1%;

        /* text */

        font-family: Gilroy;
        font-style: normal;
        font-weight: normal;
        font-size: 1.5rem;
        /* or 36px */

        letter-spacing: 0.05em;

        color: #010203;
    }

    .container #group1{
        display: none;
    }

    .container #mask{
        display:flex;
		visibility:visible;
        width: 100%;
        height:45.87%;
        position: absolute;
        top:69.865%;
        z-index: 1;
    }

    .container .project_card{
        width: 100%;
        height:67.16%;
        position: absolute;
        top:104.04%;
        left: 0%;
        right: 0%;
    }
	
	.container .project_card #card_description{
		font-size: 1.5rem;
	}

    footer{
        height:23.98%;
        top:171.21%;
    }

    footer p{
        position: absolute;
        height: 36px;
        left: 12.01%;
        right: 26.92%;
        bottom: 35px;
		letter-spacing:0em;
    }





}