:root {
	/* #F3F1F1 */
	/*--background-color:#252526;
	/*--background-color: #d4d6d9;
	--secondary-background: #3e3e42;
	--blue: #143AA2;
	--light-blue: #3E8DE3;
	--black: #04060D; */
	
	--background-color:#dddddd;
	/*--background-color: #d4d6d9;*/
	--secondary-background: #3e3e42;
	--blue: #0077B6;
	--light-blue: #3E8DE3;
	--black: #FFFFFF;
	--paragraph: #333333;
}

html, body {
    background-color: var(--black);
    margin: 0;
	width: 100%;
}
h1, h2, h3, h4 {
    text-transform: uppercase;
    font-weight: 350;
	font-family: Montserrat, sans-serif;
}
p {
    font-family: Vollkorn, serif;
}
h2 {
    color: white;
}
h3 {
    font-size: 19px;
    color: var(--paragraph);
}
h1::after, h2::after {
		display: block;
		position: relative;
		top: 12px;
		content: " ";
		width: 70px;
		height: 3.2px;
		background: var(--light-blue);
}
h1::after {
    margin: .5em;
}
a {
	text-decoration: none;
}
 button {
        background-color: var(--light-blue);
        border: none;
        padding: 1.1rem 1.5rem;
        font-style:italic;
        color: white;
        box-shadow: 1px 1px 5px black;
        font-size: 20px;
}
.landing {
   background: linear-gradient( rgba(169, 214, 229, 0.75), rgba(169, 214, 229, 0.9) ), url("../kuvat/out.jpg");
    background-size: 120%;
    background-position: center left;	
    color: white; 
}

@media screen and (max-width: 601px) {
    .landing {
        background-size:90%;
        background-position: 25% 40%;
    }
    .extra-landing-mobile {
        display:block;
        padding-top: .5em;
    }
    .extra-landing-mobile p {
        padding-bottom: 1em;
    }
    .extra-landing-pc {
        display: none;
    }
}
.services-page h2 {
    color: var(--paragraph);
}
@media screen and (min-width: 601px) {
    .landing {
        padding: 11em 1em 3.5em 1em;
    }
    .landing h1 {
        margin-top: .6em;
        font-size: 46px;
        line-height: 55px;
    }
    .landing h3 {
        padding: .6em;
        font-family: Vollkorn, serif;
        color: hsla(0, 0%, 100%, 0.81);
        font-size: 20px;
        font-style: italic;
        font-weight: 300;
    }
    .landing p {
        color: var(--black) !important; 
        margin: 3em;
        margin-top: ;
    }
    button:hover {
    background-color: var(--black);
    color: var(--blue);
    }
    .extra-landing-mobile {
        display:none;
    }
    .extra-landing-pc {
        display: block;
        background-color: var(--secondary-background);
    }
    .extra-landing-pc p {
        padding: 1.2em 1.2em 2em 1.2em;
        margin: 0;
        font-size: 20px;
        color: var(--black) !important; 
    }
    .landing-pc-content {
        padding: 2em 2em 2.5em 2em;
    }
    .extra-landing-mobile p {
        color: var(--black) !important;
    }
    .services-page {
        background-color: var(--black);
        padding-top: 3.2em;
        padding-bottom: 3em;
    }
    .services-page h2 {
        font-size: 24px;
        color: var(--paragraph);
    }
    .about {
	width: fit-screen;
	overflow-x: hidden;
	background-color: var(--black);
	padding: 1em 4em 2em 4em;
	color: var(--black); 
	}
	.about h2 {
	    color: var(--paragraph);
	}
    .APar {
        float: left;
        width: 60%;
        margin-top: 1.5em;
    }
    .about img {
        float: left;
        width: 30%;
        margin-right: 2em;
    }
    
    .contact {
        width: 100%;
    }
    .contact p {
        margin-top: 2.5rem;
    }
}

/* DESKTOP VIEW FOR SERVICES TABLE */
	#service-table-desktop {
		font-family: monospace;
		display: block;
		margin-right: 2.2rem;
		margin-left: 2.2rem;
	}
	td {
	    width: 33%;
	    padding: .5rem .5rem;
	}
	p {
	    color: var(--paragraph); 
	    padding-bottom: 0;
	}
	#service-table-mobile {
		display: none;
	}

@media screen and (max-width: 600px) {
    html, body {
        background-color: black;
        margin: 0;
	    width: 100%;
    }
    .navbar {
    	display: none;
    }
    .about img {
    	display: none;
    }
	
	/* MOBILE VIEW FOR OPENING PIC */
	.landing {
	    padding: 6rem .7rem 1.8rem .7rem;
		background-size: 550%;
	}
	.landing h3 {
	    font-family: Vollkorn, serif;
        color: hsla(0, 0%, 100%, 0.81);
        font-style: italic;
        font-weight: 300;
	}
	#service-table-desktop {
		display: none;
	}
	#service-table-mobile {
		display: block;
	}
	
	/*Services tables styling */
	.service-table {
		margin: .5rem;
		border-spacing:1rem;
	}
	td, tr {
		background-color: var(--background-color);
		color: var(--paragraph);
		font-family: verdana;
		text-align: center;
		height: 3rem;
		padding: .2rem .6rem;
		border: 1px solid var(--lightblue);
	}
	.about {
    	overflow-x: hidden;
    	background-color: var(--secondary-background);
    	padding-bottom: 1.5rem;
	}
	.about p {
	    color: var(--black) !important;
	}
	.about img {
		max-width: 70%;
		width: auto;
		height: auto;
		display: block;
		padding: 0rem;
		float: center;
		/*box-shadow: 2px 2px 4px;*/
	}
	.APar {
		width: 80%;
		margin-top: 2rem;
	}
	.inner-contact {
	    margin: 2.2rem;
	}
	.services-page {
        z-index: -1;
        padding: 2.5rem .5rem 1.5rem .5rem;
        background-color: var(--black);
    }
}

.navbar {
	display: block;
	/* position: fixed; */
	background-color: var(--black);
	text-align: right;
	top: 0;
	z-index: 1;
	padding: .7rem;
	margin-bottom: 0 !important;
}
.navbar img {
	float: left;
	padding: 1rem;
}
.navbar a {
	text-decoration: none;
	background-color: none;
	color: var(--light-blue);
	margin-right: 1rem;
}
.contact {
    background-color: var(--paragraph);
    width: 100%;
	padding-bottom: 1rem;
	padding-top: 2rem;
}
#contact-text {
    display: none;
}
.contact-table {
    display: block;
    font-weight: 400;
    width: 90%;
}
.contact-table th {
    padding: 1em;
    width: 25%;
}
.contact-table img {
    filter: invert(86%) sepia(27%) saturate(434%) hue-rotate(162deg) brightness(94%) contrast(91%);
    max-height: 60px;
    max-width:60px;
}
.contact-table h4 {
    color: var(--black);
    margin-bottom: .1em !important;
}
.contact-table p {
    color: var(--black);
    font-weight: 300;
    margin-top: .5em !important;
}
@media screen and (max-width: 600px) {
    .contact {
        background: linear-gradient( rgba(169, 214, 229, 0.7), rgba(169, 214, 229, 0.7) ), url("../kuvat/pen.jpg");
		background-position: 55% 0;
		background-size: 200%;
    }
    .contact-table {
        display: none;
    }
    #contact-text {
        display: block;
    }
}

.footer {
	background-color: var(--paragraph);
	text-align: center;
	font-size: 80%;
	padding: .5rem;
	color: var(--light-blue);
	padding: 1rem;
	display: block;
}
@media screen and (max-width: 600px) {
    .footer {
        background-colo: var(--black);
    }
}