@charset "utf-8";



:root {

   --app-height: 100%;

}



html,

body {

	font: Verdana, Arial, Helvetica, sans-serif;

	color: white;

	background: black;

    padding: 0;

    margin: 0;

    width: 100vw;

    height: 100vh;

    height: var(--app-height);

    display: flex;

	flex-direction: column;

}



p {

  text-align: justify;

  text-justify: inter-word;

}



/* body  {

	font: Verdana, Arial, Helvetica, sans-serif;

	color: white;

	background: black;

	margin: auto; 

	padding: 0;

	text-align: justify; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

/*	display: flex;

	flex-direction: column;

}

*/

@media screen and (min-width: 50rem) {

  .outer-box-frame {

 		border: 1rem solid #C1A2CC;

	  margin: 3rem auto ; /*the auto for the left/right keeps the page centered*/

		padding: 3rem;

    max-width: 38rem; // min-width - 2(padding + border)

  }

}



p {

  font-size: 16px;

}

@media screen and (min-width: 320px) {

  p {

    font-size: calc(13px + 6 * ((100vw - 320px) / 680));

  }

}

@media screen and (min-width: 1000px) {

  p {

    font-size: 16px;

  }

}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

	float: right;

	margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page */

	float: left;

	margin-right: 8px;

}



.jumbotron {

		background: black;

		margin-top : 1rem;

		margin-bottom:  0.5rem;

}



.header_container {

        display: flex;

        align-items: center;

        justify-content: center

}



.footer_container > div {

       width: 100%;

  	max-width: 30%;

   margin: 10px;

}



.footer_container {

		margin-top: 80px;

		display: flex;

  		flex-wrap: wrap;

  		text-align: center;

  		justify-content: center;

}



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

  .footer_container > div {

    width: 100%;

    max-width: 50%;

  }

}



      

.image {

      /*  flex-basis: 40%; */

        margin-right: 10px;

        margin-left: -30px;

        width: 100%;

        display: flex;

      }





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

  #contact .column {

    width: 100%;

  }

}

.column {

  float: left;

  width: 33.33%;

}



/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}



* {

  box-sizing: border-box;

}



section  { margin-bottom: 50px; }



/* { min-height: 100vh;

			min-height: webkit-fill-available; } */





.reels {



	display: none;

}





.firstname, .lastname {

  font-size: 60px;

}

@media screen and (min-width: 320px) {

  .firstname, .lastname {

    font-size: calc(35px + 6 * ((100vw - 320px) / 680));

  }

}

@media screen and (min-width: 1000px) {

  .firstname, .lastname  {

    font-size: 60px;

  }

}

.firstname {

	font-family: Verdana, Geneva, sans-serif;

	/* font-size: 5.5vw; */

	font-style: normal;

	font-weight: bold;

	color: #FFC;

}

.lastname {

	font-family: Verdana, Geneva, sans-serif;

	/* font-size: 5.5vw; */

	font-style: normal;

	line-height: normal;

	font-weight: normal;

	font-variant: normal;

	color: #FFF;

	

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

	clear:both;

    height:0;

    font-size: 1px;

    line-height: 0px;

}



#form2{

	margin:2em 0;

	color:#fff;

	width: 420px; /* customize width, this form have fluid layout */

		}

	#form2 h3{

		margin:0;

		background:#999  repeat-x;		

		color:#fff;

		font-size:25px;

		border:1px solid #aaaaaa;

		border-bottom:none;

		}		

	h3 span{

	display:block;

	padding:10px 20px;

	max-width:420px;



	background-color: #666;

	background-image: none;

	background-repeat: no-repeat;

		}				

	#form2 fieldset{

	margin:0;

	padding:0;

	border:none;

	border-top:3px solid #000;

	padding-bottom:1em;

	background-color: #000;

	background-image: url(/img/form_top.gif);

	background-repeat: repeat-x;

		}		

	#form2 legend{display:none;}	

	#form2 p{

	margin:.5em 20px;

	background-image: none;

	background-repeat: repeat-x;

}	

	#form2 label{

	display:block;

	text-align: left;

}	

	#form2 input, #form2 textarea{

	width: 100%;

	border:1px solid #111;

	padding:5px 3px;

	color:#fff;

	background-color: #282828;

	background-image: url(/img/form_input.gif);

	background-repeat: repeat-x;

		}		

	#form2 textarea{

		height:225px;

		overflow:auto;

		}					

	#form2 p.submit{

		text-align:right;

		}	

	#form2 button{

	padding:0 20px;

	height:32px;

	line-height:32px;

	border:1px solid #999999;

	color:#fff;

	cursor:pointer;

	text-align:center;

	background-color: #aaaaaa;

	background-image: none;

	background-repeat: repeat-x;

		}