﻿
#privacy {

color:rgb(255, 255, 102);
	
font-family: LatoLight; 
font-size: 16px;	
font-weight: normal;
text-shadow: none;
text-decoration: underline;
font-style: normal;
}


#privacy:hover {
	
color:#ffffff;
text-shadow: none;
font-style: normal;
}




.inlineBlock{
	display: inline-block;
	vertical-align:top;
	
}

.box {
	padding-bottom:50px;
	 }




.imgbox{
	width: 50%;

}

.toplist{
	width: 45%;
	padding: 0 2%;
	margin: 0 auto;
}


/* Set a style for main button */


.formbox__input_mainsubmit{
	background: #ad0000;
	background-image: -webkit-linear-gradient(top, #ffe500, #72720a);
	background-image: -moz-linear-gradient(top, #ffe500, #72720a);
	background-image: -ms-linear-gradient(top, #ffe500, #72720a);
	background-image: -o-linear-gradient(top,#ffe500, #72720a);
	background-image: linear-gradient(to bottom,#ffe500, #72720a);
	
	outline: none;
	color: #ffffff;
	width: 100%;
	height: 50px;
	font-size: 20px;
	border-radius: 5px;
	padding: 14px 15px;
	cursor: pointer;
	text-shadow: 0 0 5px #000000;
}

.formbox__input_mainsubmit:hover {
	background-image: -webkit-linear-gradient(top, #ffe500, #595900);
	background-image: -moz-linear-gradient(top,#ffe500, #595900);
	background-image: -ms-linear-gradient(top, #ffe500, #595900);
	background-image: -o-linear-gradient(top,#ffe500, #595900);
	background-image: linear-gradient(to bottom, #ffe500, #595900);
	color: #ffffff;
	text-shadow: 0 0 5px #000000;
}


.footer {
	text-align: center;
	color: #fff;
	background-color: black;
	font-size: 16px;
	width: 100%;
	bottom:0;
	left:0 ;
	padding-top: 1%;
	padding-bottom:1%;
	text-shadow: 1px 1px 1px #000;
}




/* Add padding to container elements */

.container1 {
    
padding: 16px;
	position:relative;
	
}




/* The Modal (background) */

.modal {
    
display: none; /* Hidden by default */
    
position: fixed; /* Stay in place */
    
z-index: 1; /* Sit on top */
    
left: 0;
    
top: 0;
    
width: 100%; /* Full width */
    
height: 100%; /* Full height */
    
overflow: auto; /* Enable scroll if needed */
   
background-color: #474e5d;
    
padding-top: 50px;
}




/* Modal Content/Box */

.modal-content {
    
background-color: #fefefe;
    
margin: 5% auto 15% auto; 
/* 5% from the top, 15% from the bottom and centered */
    
border: 1px solid #888;
    
width: 50%; /* Could be more or less, depending on screen size */
	
box-shadow: 0 0px 2px rgba(0, 0, 0), 0 15px 20px rgba(0, 0, 0, 0.5);
	border-radius: 8px;
}



/* Style the horizontal ruler */

hr {
    
border: 1px solid #f1f1f1;
    
margin-bottom: 25px;
}
 
 


.formbox{
	
width: 100%;
	
margin: 10% auto 15% 0;
	
padding:10px 20px 20px 20px; 
	
background-color:rgba(192,192,192,0.8);
	
border-radius:20px;
}


.formbox__input{
	
border-color:rgb(15, 30, 112);
	
border-width: 3px;
	
background-repeat: no-repeat;
	
background-position: 96%;
	
border-radius: 5px;
	
border: 3px solid rgba(0,0,0,0.2);
	
width: 95%;
	
padding: 10px 15px;
	
font-size: 15px;
	
outline: none;
	
margin-top: 15px;
}


.formbox__input::-webkit-input-placeholder {
	
color:#000000;
}


.formbox__input::-moz-placeholder {
	
color: #000000;
}


.formbox__input:-moz-placeholder {
	
color: #000000;
}



.formbox__input:-ms-placeholder {
	
color: #000000;
}



/* Formbox change of colour upon clicking */


.formbox__input:focus {
	
border-color: #847777;
}


.formbox__input_name{
	
background-position: 95%;
}




.formbox__input_submit{
	
background: #ad0000;
	
background-image: -webkit-linear-gradient(top, #ffe500, #72720a);
	background-image: -moz-linear-gradient(top, #ffe500, #72720a);
	
background-image: -ms-linear-gradient(top, #ffe500, #72720a);
	
background-image: -o-linear-gradient(top, #ffe500, #72720a);
	
background-image: linear-gradient(to bottom, #ffe500, #72720a);
	
outline: none;
	
color: #ffffff;
	
width: 100%;
	
font-size: 20px;
	
border-radius: 5px;
	
padding: 14px 15px;
	
cursor: pointer;
	
text-shadow: 0 0 5px #000000;
}


.formbox__input_submit:hover {
	
background-image: -webkit-linear-gradient(top, #ffe500, #595900);
	background-image: -moz-linear-gradient(top, #ffe500,#595900);
	
background-image: -ms-linear-gradient(top, #ffe500, #595900);
	
background-image: -o-linear-gradient(top, #ffe500,#595900);
	
background-image: linear-gradient(to bottom, #ffe500, #595900);
	
color: #ffffff;
	
text-shadow: 0 0 5px #000000;
}




.processImage img{
	
margin: 10px auto;
	
width: 100%;
   	
height: auto;
	
margin-left: auto;
	
margin-right: auto;
  	
}

 

/* Close button */


.close {
     
position: absolute;
   	 
right: -15px;
   	 
top: -15px;
}





.container3 {width: 60%; margin-left: auto; margin-right: auto;}



/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code3
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }






/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}


/*  */

  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    {
	width: 48%;
	height: auto;
	
}
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }




/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
	font-size: 19px; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 28px;
	font-weight: 400;
	font-family: 'Lato', sans-serif;
	color: #222;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 {
	font-size: 35px;
	line-height: 55px;
	letter-spacing: -1px;
}
h2 { font-size: 45px; line-height: 48px; letter-spacing: -1px; }
h3 { font-size: 40px; line-height: 43px;  letter-spacing: -1px; }
h4 { font-size: 35px; line-height: 38px; letter-spacing: -1px; }
h5 { font-size: 30px; line-height: 33px;  letter-spacing: -1px; }
h6 { font-size: 25px; line-height: 28px;  letter-spacing: 0px; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 35px; }
  h2 { font-size: 45px; }
  h3 {
	font-size: 40px;
	line-height: normal;
}
  h4 {
	font-size: 35px;
	line-height: 45px;
}
  h5 {
	font-size: 28px;
}
  h6 { font-size: 25px; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }




/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style-image: url('../images/bullet.png'); }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 20;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }




  
 

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }





@media (max-width: 640px) {


	 h1 { font-size: 20px;
	line-height: 25px;
	}


	.imgbox { 
		width: 100%!important;
		margin: auto;
	}

	.imgbox img{
   		display: block;
		height: auto !important;
		max-width: 100% !important;
	}

	.toplist{ 
		width: 100%!important;
		margin: auto;
		padding-top:50px;
	}

	.list-icon{
		width: 100% !important;
	}



.formbox__input_mainsubmit{
		
width: 100%;
		
margin: auto;	
font-size: 14px;
text-shadow: #000000 0pt 0pt 1px, #000000 0pt 0pt 5px, #000000 0pt 0pt 10px, #ffffff 0pt 0pt 15px,  #ffffff 0pt 0pt 20px;
}
		
	



/* Close button */
	
.close {
    
width: 100%;
	
position: absolute;
   	
left:0;
	
top: 10px;
	
}
	
	
	



.modal-content {
		
width: 100%;
		
margin: auto;
	}
	
	

	
	


.formbox__input{
	
width: 90%;
	
}


.container3 {width: 100%; 
}

}