/* ---------------------- Diamond Touch Contact CSS ---------------------- */

/* ------- Removal of default padding, margin & list style ------- */

@font-face {
    font-family: Impact;
    src: url(Impact.ttf);
}
@font-face {
	font-family: calibril;
    src: url(CALIBRIL.ttf);
}


h1, h2 {
	font-family: Impact; font-weight: 400; letter-spacing: .5px;
	color: rgb(254,144,0); opacity: 0; position: relative;
    animation: fade-slide 1s; animation-fill-mode: forwards; animation-delay: 1.5s;
}
h2 { 
	font-size: 24pt;
}
p, b {
	font-family: calibril; font-weight: 400; letter-spacing: .5px;
	opacity: 0; animation: fade-text 1s; animation-delay: 0.3s;
	animation-fill-mode: forwards; animation-delay: 1.8s;
}
b {
	display: inline-block;
}
a {
	font-family: calibril; font-weight: 400; letter-spacing: .5px;
	color: black;
}


/* -------- Container -------- */

#container {
	width: calc(100% - 600px); margin: 70px 300px 0 300px;
	display: none; float: left; transition: .5s;
}


/* ------- Spill ------- */

#spill h1{
	font-size: 40pt;
}
#spill p{
	font-size: 16pt;
}

#spill ol {
	margin: 15px 0; display: flex;
}
#spill ol b {
	width: 30%; margin: 0 50px 0 0; font-size: 16pt;
	font-weight: 600;
}


/* ------- contact-det ------- */

#contact-det {
	width: 100%; margin: 30px 0; display: inline-block;
}

#text {
	margin: 15px 50px 0 0 ; display: flex; float: left;
}

#imgbox {
	width: 80px; float: left;
}
#imgbox img {
	width: 80px; 
}

#textbox {
	margin: 25px 0 0 25px;
}
#textbox a{
	font-size: 17pt;
}


/* -------- Selection -------- */

#selection {
	width: 100%; 
	margin: 25px 0 40px 0;
	float: left;
}
#selection h1 {
	margin: 0 0 0 75px;
}
#selection p {
	margin: 5px 0 25px 75px;
	font-size: 16pt;
}
#selection img {
	width: 100%;
}


/* --------------------------- Medium sized screens -------------------------- */

@media screen and (max-width:1680px){

#container {
	margin: 60px 0 0 0;
	transition: .5s;
}

}


/* --------------------------- Tablet sized screens -------------------------- */

@media screen and (max-width:1200px){
	
#container {
	margin: 105px 0 75px 0;
}


#spill{
	width: 100%; float: left;
}


#imgbox {
	width: 60px; margin: 0 0 0 35px; float: left;
}
#imgbox img {
	width: 60px;
}


#selection h1 {
	margin: 0 0 0 35px;
}
#selection p {
	margin: 5px 0 25px 35px; font-size: 16pt;
}


#text {
	width: 100%; margin: 25px 0 0 0;
}

#textbox {
	width: 75%;
	margin: 15px 20% 0 5%;
}
#textbox a{
	overflow-wrap: break-word;
}

}


/* --------------------------- Mob sized screens -------------------------- */

@media screen and (max-width:640px){

#container {
	width: 90%; margin: 60px 5% 0 5%;
}


/* ------- Spill ------- */

#spill p {
	font-size: 14pt;
}
#spill h1 {
	font-size: 28pt;
}

#spill ol {
	display: block;
}
#spill ol b {
	width: auto; margin: 0 0 15px 0; font-size: 14pt;
}


/* ------- contact-det ------- */

#contact-det {
	margin: 10px 0;
}

#text {
	margin: 20px 0 0 0;
}


#imgbox {
	width: 50px;
	margin: 0 0 0 15px;
}
#imgbox img {
	width: 50px;
}


#textbox {
	margin: 15px 20% 0 15px;
}
#textbox a {
	font-size: 14pt;
}


#selection h1 {
	margin: 0 0 0 15px;
}
#selection p {
	margin: 5px 15px 25px 15px;
}

}


/* Animation */

@keyframes fade-slide {
    from {left: -10%; 
	opacity: 0;
	}
    to {left: 0px;
	opacity: 1;
	}
}

@keyframes fade-text {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fade-up {
    from {top: 10%;
	opacity: 0;
	}
    to {top: 0px;
	opacity: 1;
	}
}