/* --- RESPONSIVENESS --- */

@media screen and (max-width:870px) , (orientation:portrait){
    *{
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        font-family: 'Lobster Two', cursive;
        font-family: 'Philosopher', sans-serif;
    }






    /* --- HEADER --- */
    .header{
        overflow: hidden;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #000000;
        height: 100vh;
        width: 25vh;
        top: 0;
        right: -25vh;
        text-align: left;
        z-index: 999;
        transition: 0.5s;
    }
    .logo-box{
        left: 0;
        width: 20vh;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin-bottom: 3vh;
        margin-right: 1vh;
        font-size: 3vh;
        cursor: pointer;
    }
    #menu_close{
        display: block;
        color: #fff;
        margin: 1vh;
        font-size: 3vh;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 1vh;
    }





    /* --- HOME --- */
    /* .home-section{
        display: none;
    } */
    .text-box h1{
        font-size: 8vh;
    }
    .text-box p{
        font-size: 2.8vh;
    }









    /* --- ABOUT --- */
    /* .about-section{
        display: none;
    } */
    @keyframes Gradient {
        0% {
          background-position: 0% 0%;
        }
        50% {
          background-position: 100% 100%;
        }
        100% {
          background-position: 0% 0%;
        }
    }
    .about-section{
        height: 100%;
    }
    .about-header{
        width: 100%;
    }
    .about-header h2{
        margin-top: 2vh;
        font-size: 5vh;
    }
    .about-header p{
        width: 80%;
        font-size: 3vh;
        padding: 0;
        overflow: hidden;
    }
    .about-row{
        display: inline-block;
        overflow: hidden;
    }
    .about-col{
        padding: 4vh 4vh;
        overflow: hidden;
    }
    .about-col:hover{
        border-radius: inherit;
        transition: inherit;
        transform: inherit;
        cursor: inherit;
    }
    .about-row .about-col h3{
        font-size: 4vh;
        font-weight: 600;
    }
    .about-row .about-col p{
        font-size: 2.8vh;
        font-weight: 400;
    }
    .readMore-btn-box{
        display: inline-block;
    }
    .readMore-btn{
        display: block;
        text-decoration: none;
        color: #094744e0;
        border: 0.2vh solid #094744e0;
        padding: 1vh 2vh;
        font-size: 2.5vh;
        margin-top: 2.5vh;
        background: transparent;
        position: relative;
        cursor: pointer;
        border-radius: 20vh;
    }
    /* .readMore-btn:hover{
        transition: all 0.3s ease-in-out;
        transform: scale(1.1);
    } */
    .about-img-col{
        display: none;
    }
    .about-img{
        display: none;
    }
    




    /* --- APPS --- */
    .apps-section{
        /* display: none; */
        height: 100%;
    }
    #mov_bg_1{
        object-position: 50vh 0;
        height: 100%;
    }
    .apps-section{
        background: linear-gradient(50deg, #540668cc, #000000cc, #082d7ecc);
        background-size: 100% 100%;
    }
    .apps-header h2{
        font-size: 6vh;
    }
    .apps-header{
        width: 90%;
    }
    .apps-header p{
        width: 90%;
        font-size: 3vh;
    }
    .apps-row{
        display: inline-block;
        justify-content: space-between;
        margin-bottom: 4vh;
    }
    .apps-col{
        background-color: #dededeaa;
        border-radius: 5vh 0 5vh 0;
        padding: 4vh 4vh;
        margin-top: 3vh;
        align-content: space-between;
    }
    .apps-col:hover{
        transition: inherit;
        transform: inherit;
        cursor: inherit;
    }
    .apps-row .apps-col h3{
        font-size: 4vh;
    }
    .apps-row .apps-col p{
        font-size: 2.8vh;
    }
    .os_icon{
        width: 6vh;
    }








    /* --- WEBSITES --- */
    .web-section{
        /* display: none; */
        height: 100%;
        overflow: hidden;
        scrollbar-color: red yellow;
    }
    .shape_bg_1{
        position: absolute;
        top: 15vh;
        right: 55%;
        bottom: 0;
        background-color: #00000000;
        border: 0.5vh solid #ee6e0620;
        width: 0vh;
        height: 0vh;
        border-radius: 10vh;
        opacity: 0;
        z-index: -1;
        animation: shapeChange_1 20s ease-in-out infinite, twist_cw 15s linear infinite;
    }
    .shape_bg_2{
        position: absolute;
        right: 0%;
        top: 80%;
        background-color: #00000000;
        border: 0.5vh solid #a30da844;
        width: 15vh;
        height: 15vh;
        border-radius: 10vh;
        opacity: 0;
        z-index: -1;
        animation: shapeChange_2 15s ease-in-out infinite, twist_cw 13s linear infinite;
    }
    .shape_bg_3{
        position: absolute;
        height: 25vh;
        width: 25vh;
        left: 30vh;
        top: 15vh;
        border-radius: 1vh;
        background-color: #00000000;
        border: 0.5vh solid #0d5da833;
        opacity: 1;
        z-index: -1;
        animation: shapeChange_3 15s ease-in-out infinite, twist_ccw 10s linear infinite;
    }
    @keyframes shapeChange_1 {
        0% {}
        25% {
            border-radius: 0vh;
            width: 70vh;
            height: 70vh;
            border-radius: 0;
            opacity: 1;
        }
        90% {
            width: 70vh;
            height: 70vh;
            opacity: 1;
        }
        100% {
            width: 0vh;
            height: 0vh;
            border-radius: 10vh;
            opacity: 0;
            right: 35%;
        }
    }
    @keyframes shapeChange_2 {
        15% {
            border-radius: 10vh;
        }
        25% {
            width: 40vh;
            height: 40vh;
            opacity: 1;
            border-radius: 0;
        }
        90% {
            width: 40vh;
            height: 40vh;
            top: 40%;
        }
        100% {
            width: 15vh;
            height: 15vh;
            opacity: 0;
            right: 35%;
        }
    }
    @keyframes shapeChange_3 {
        25% {
            width: 35vh;
            height: 35vh;
        }
        50% {
            top: 60%;
        }
        75% {
            width: 25vh;
            height: 25vh;
        }
        100% {
            top: 15vh;
        }
    }
    @keyframes twist_cw {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes twist_ccw {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
    .web-section h2{
        font-size: 6.5vh;
    }
    .web-section p{
        font-size: 3.2vh;
    }
    .web-main-content{
        width: 90%;
        display: block;
        margin: auto;
        margin-bottom: 5vh;
    }
    .web-main-content .left{
        text-align: left;
        width: 100%;
    }
    .web-main-content .right{
        text-align: left;
        width: 0;
    }
    .header-hr{
        width: 80%;
    }
    .web-col{
        border: 1px solid #8f8f8f;
    }
    .web-row{
        margin: 0 6% 0 6%;
        display: inline-block;
        margin-bottom: 8vh;
    }
    .web-row .web-col p{
        font-size: 2.8vh;
    }
    .web-col:hover{
        transform: scale(1);
    }













    /* --- SERVICES --- */
    .serv-section{
        /* display: none; */
        height: 100%;
    }
    .serv-section h2{
        margin-top: 15vh;
        font-size: 6.5vh;
    }
    .serv-header{
        width: 90%;
    }
    .serv-container{
        width: 90%;
        margin: 3vh auto;
    }
    .serv-content{
        /* background: linear-gradient(45deg, 
            #099e9ebb,
            #26bfffbb,
            #e66e05bb,
            #960808bb,
            #db1f6dbb,
            #099e9ebb,
            #26bfffbb,
            #e66e05bb,
            #960808bb,
            #db1f6dbb
        ); */
        /* background-size: 1000%; */
        /* background-position: 0% 0%; */
        /* box-shadow: 0 0 5vh #000000; */
        display: inline-block;
        padding: 2vh 0 2vh 0;
    }
    .serv-box{
        height: 100%;
        box-shadow: 0 0 3vh 0 #00000070;
        border: 0.2vh solid #00000020;
        padding: 2vh;
        margin: 1vh;
    }
    .serv-box:hover{
        box-shadow: 2vh 10vh 10vh 10vh #00000070;
        transform: scale(1.1);
    }
    .serv-box h3{
        font-size: 4vh;
        margin-bottom: 1vh;
    }
    .serv-box p{
        font-size: 2.5vh;
        line-height: 3vh;
    }











    /* --- CONTACT/BEFORE --- */
    /* .contact-section{
        display: none;
    } */
    .contact-box{
        width: 90%;
		-webkit-transition: all 1s linear;
    	transition: all 1s linear;
    }
    table{
        width: 100%;
    }
	









	/* --- FOOTER/MOBILE --- */
	.footer-desktop{
		display: none;
	}
	.footer-mobile{
		display: flex;
		height: auto;
		width: 100%;
		background-color: #000;
	}
	.footer-mobile-info{
		margin: auto;
		padding-bottom: 10px;
		width: 95%;
		text-align: center;
		table-layout: fixed;
	}
	.footer-mobile-row .footer-mobile-col p, .footer-mobile-info tr td{
		font-size: 14px;
		font-weight: 400;
		color: #cccccca1;
	}
	.td-left{
		text-align: left;
	}
	.footer-mobile-info td a{
		text-decoration: none;
		color: #fff;
	}
	.social-icons{
		font-size: 4vh;
        padding-top: 1vh;
        margin-right: 1vh;
	}
	#footer-icon{
		width: 34px;
	}
	.footer-mobile-logo{
		width: 80px;
	}
}


/* Portrait */
/* @media screen and (orientation:portrait) { */
    /* Portrait styles */
/* } */
/* Landscape */
/* @media screen and (orientation:landscape) { */
    /* Landscape styles */
/* } */