@charset "utf-8";
/* CSS Document */
@font-face{font-family:'ATSM';src:url(https://thephotocloser.com/assets/fonts/atsm.otf)}
	body{
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		overflow-x: hidden;
        font-family: Arial, Helvetica, sans-serif;
        background-image: url(https://thephotocloser.com/assets/grey-canvas.jpg);
	}
	.tatsm {
		font-family: Arial, Helvetica, sans-serif;
    }
    .chl {
        text-align:center; font-size:100px; font-weight:700;
    }
	.tsm{
		font-size: medium;
	}
	.tsl{
		font-size:large;
	}
	.tsxl{
		font-size: x-large;
	}
	.tpl50 { padding-left: 50px; }
	.pnobrk {
	margin-bottom: 5px;
	margin-top: 5px;
	}
	#container {
		width: 1240px;
		display: block;
		margin: 0 auto;
        min-height: 100px;
	}
	.sltall { min-height: 500px; }
	#col100 {
		width: 99%;
		margin: .5%;
		display: block;
		float: left;
	}
	#col50 {
		width: 49%;
		margin: .5%;
		display: block;
		float: left;
	}
	#col50 img {
		max-width: 100%;
		height: auto;
	}
	#col375 {
		width: 36.5%;
		margin: .5%;
		display: block;
		float: left;
	}
	#col625 {
		width: 61.5%;
		font-family: Arial, Helvetica, sans-serif;
		margin: .5%;
		display: block;
		float: left;
	}
	#column15 {
		width: 13%;
		margin: .5%;
		display: block;
		float: left;
	}
	#column85 {
		width: 83%;
		font-family: Arial, Helvetica, sans-serif;
		margin: .5%;
		display: block;
		float: left;
	}
	#col375 img {
		max-width: 100%;
		height: auto;
	}
	#col625 img {
		max-width: 100%;
		height: auto;
	}
	#slideshow { 
    	position: relative; 
    	width: 100%; 
    	height: auto; 
	}

	#slideshow > div { 
    	position: absolute; 
    }
    .color0 { color: #ffffff; }
	.color1 { color: #ff00ff; }
	.color2 { color: #00ff00; }
	.color3 { color: #ff0000; }
	.color4 { color: #0000ff; }
	.color5 { color: #a7a9a9; }
	.color6 { color: #df9240; }
	.color7 { color: #47a5fe; }
	h1 { 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 5vh;
		font-weight: 400;
		padding-left: 50px;
	}
	h2 { 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 4vh;
		font-weight: 400;
		padding-left: 50px;
	}
	h3 { 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 3vh;
		font-weight: 400;
		padding-left: 50px;
	}
	.mailhl { 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 3vh;
		font-weight: 400;
		padding-left: 50px;
	}
	.atsmhl {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 3vh;
		font-weight: 400;
	}
	.bigtext {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 5vh;
		font-weight: 400;
		padding-left: 0px;
	}
	p { font-family: Arial, Helvetica, sans-serif; font-size: 1.4vh; line-height: 1.6vh;  padding-left: 70px;}
	a:link { color: #FF0000; font-size: 1.4vh; line-height: 1.6vh; } a:visited { color: #FF0000;}
	.flabel {font-size: 1.4vh; line-height: 1.6vh; margin-bottom: 9px; }
	.numbtext {font-size: 1.7vh; line-height: 1.8vh; font-weight: 800; }
	.numbtextul {font-size: 1.7vh; line-height: 1.8vh; margin-bottom: 5px; text-decoration: none; font-weight: 800; }
	@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
	@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
	@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
	.fi {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;

    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;

    	-webkit-animation-duration:500ms;
    	-moz-animation-duration:500ms;
    	animation-duration:500ms;
	}
	.fi.one {
		-webkit-animation-delay: 0.3s;
		-moz-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.fi.two {
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay:0.6s;
		animation-delay: 0.6s;
	}

	.fi.three {
		-webkit-animation-delay: 0.9s;
		-moz-animation-delay: 0.9s;
		animation-delay: 0.9s;
	}

	.subbutton {
		margin-top: 15px;
		margin-left: 0px;
		padding: 10px 10px 10px !important;
		font-size: 12px !important;
		background-color: #0000ff;
		color: #ffffff;
		border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 1px solid #0000ff;
		cursor: pointer;
	}
		.subbutton:hover {
		background-color: #ff0000;
		border: 1px solid #ff0000;
	}
	.formthird {
		width: 32.333%; margin:.5%; float: left;
	}
	.formwhole {
		width: 65.666%; margin:.5%; float: left;	
	}
	#logbox {
	width: 40%;
	max-width: 600px;
	min-width: 350px;
	height: 200px;
	margin-top: 200px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	border: 1px solid #000000;
	padding: 10px;
	background-color: #DCDCDC;
	}
	.fw100 { width: 100%; }
	.fd995 { 
		width: 99.5%;
		height: 6vh;
		margin-bottom:10px; 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 5vh;
		font-weight: 400;
	}
	.fde995 { 
		width: 99.5%;
		margin-bottom:10px;
	}
	@media only screen and (max-width: 1024px){
		body {background-size: 100%;}
		h1 { padding: 0px; font-size: 2vh;}
		.atsmhl {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 2vh;
		padding: 0px;
		}
		.fde995 { 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 2vh;
		padding: 0px;
		}
		p { padding:  0px; font-size: 1.4vh; line-height: 1.6vh; }
		a:link { color: #FF0000; font-size: 1.4vh; line-height: 1.6vh; } a:visited { color: #FF0000;}
	.flabel {font-size: 1.4vh; line-height: 1.6vh; margin-bottom: 9px; }
	.numbtext {font-size: 1.4vh; line-height: 1.6vh; font-weight: 800; }
	.numbtextul {font-size: 1.4vh; line-height: 1.6vh; margin-bottom: 5px; text-decoration: none; font-weight: 800; }
		#container {
			width: 100%;
			height:100vh;
			display: block;
			float: left;
		}
		.sltall { min-height: 660px; }
		#col100 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col50 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col375 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col625 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}	
	
		.formthird {
			width: 49%; margin:.5%; float: left;
		}
		.formwhole {
			width: 99%; margin:.5%; float: left;	
		}
	}
	@media only screen and (max-width: 768px){
		body {background-size: 100%;}
		h1 { padding: 0px; font-size: 3vh;}
		.astmhl { padding: 0px; font-size: 3vh;}
		.fd995 { height: 3vh; 
		font-family: Arial, Helvetica, sans-serif;
		padding: 0px;
		}
		p { padding:  0px; font-size: 1.7vh; line-height: 1.9vh; }
		a:link { color: #FF0000; font-size: 1.7vh; line-height: 1.9vh; } a:visited { color: #FF0000;}
	.flabel {font-size: 1.7vh; line-height: 1.9vh; margin-bottom: 9px; }
	.numbtext {font-size: 1.7vh; line-height: 1.9vh; font-weight: 800; }
	.numbtextul {font-size: 1.7vh; line-height: 1.9vh; margin-bottom: 5px; text-decoration: none; font-weight: 800; }
		#container {
			width: 100%;
			height:100vh;
			display: block;
			float: left;
		}
		#col100 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col50 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col375 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col625 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}	
		.formthird {
			width: 49%; margin:.5%; float: left;
		}
		.formwhole {
			width: 99%; margin:.5%; float: left;	
		}
	}
	@media only screen and (max-width: 480px){
        .chl {
            text-align:center; font-size:50px; font-weight:700;
        }
		body {background-size: 100%;}
		h1 { padding: 0px; font-size: 5vh; line-height: 4.75vh; margin-bottom: 0; }
		.atsmhl { padding: 0px; font-size: 5vh; line-height: 4.75vh; margin-bottom: 0; }
		.fd995 { padding: 0px; font-size: 5vh; line-height: 4.75vh; margin-bottom: 0; height: 5vh; }
		p { padding:  0px; font-size: 1.8vh; line-height: 1.8vh; }
		a:link { color: #FF0000; font-size: 1.8vh; line-height: 1.8vh; } a:visited { color: #FF0000;}
	.flabel {font-size: 1.8vh; line-height: 1.8vh; margin-bottom: 9px; }
	.numbtext {font-size: 1.8vh; line-height: 1.8vh; font-weight: 800; }
	.numbtextul {font-size: 1.8vh; line-height: 1.8vh; margin-bottom: 5px; text-decoration: none; font-weight: 800; }
		#container {
			width: 100%;
			height:100vh;
			display: block;
			float: left;
		}
		#col100 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col50 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col375 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		#col625 {
			width: 99%;
			margin: .5%;
			display: block;
			float: left;
		}
		.formthird {
			width: 49%; margin:.5%; float: left;
		}
		.formwhole {
			width: 99%; margin:.5%; float: left;	
		}
	}