/*CSS document to describe design of the Webpages*/
@font-face {
    font-family: 'fira_sanslight';
    src: url('firasans-light-webfont.woff2') format('woff2'),
         url('firasans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.close{

}
body
{
	margin:0;
	padding:0;
	background-color: #F0F0F6;
	font-family: 'fira_sanslight';
    font-weight: normal;
    font-style: normal;
	
	color:#101124;
	text-align:center;
	font-size:1.2em;
	
	/*font-family:Palatino Linotype;
	background-image:url(images/back3.png);
    background: -webkit-linear-gradient(#000000, #303030 , #BFBFBF); 
    background: -o-linear-gradient(#000000, #303030, #BFBFBF);  
    background: -moz-linear-gradient(#000000, #303030, #BFBFBF); 
    background: linear-gradient(#000000, #303030, #BFBFBF);
		*/
}
/*Introduction/Home Page*/

/*Navigation Bar*/
/*Logo on Navigation*/
nav img
{
	
	padding-top:1.5%;
	padding-bottom:2%;
}

nav ul
{
	list-style-type:none;
	margin:auto;
	width:95%;
	overflow:hidden;
	padding:2%;

	color:#000;
	background-color:rgba(149,210,210,0.3);
	font-size:15pt;
	border-bottom:3px solid #84C5F4;

	-webkit-transition: max-height 1s ease-in .1s;
	-moz-transition: max-height 1s ease-in .1s;
	-ms-transition: max-height 1s ease-in .1s;
	-o-transition: max-height 1s ease-in .1s;
	transition: max-height 1s ease-in .1s;
	/*
	color:#332921;
	border:4px solid #BF0D00;
	*/

	
}

nav ul li
{
	display:inline-block;
	padding:2.5%;
	/*
	background-color:inherit;
*/
	color: inherit;
	font-size:bold;
	font-size:1.2em;
	
	-webkit-transition:background-color 1s,color 1s;
	-mos-transition:background-color 1s,color 1s;
	-ms-transition:background-color 1s,color 1s;
	-o-transition:background-color 1s,color 1s;
	transition:background-color 1s,color 1s;
}

nav ul li:hover
{
	background-color:#1F8AFF;
	color:#9FFFFB;
}

/*Options for links*/
a
{
	text-decoration:none;
	color:inherit;
	font-weight:bold;
}
a:hover{
	
	color:#9FFFFB;
}


img{
	float:auto;
}

img ,p ,h4,h3,h2,h1, section{
	display:inline-block;
	padding:auto;
	
}
p{
	width:60%;
	margin:2%;
	padding:2%;
}

.content p{
	width:100%;
	margin:2%;
	padding:2%;
}
.content ul li{

	padding:1%;
	text-align:left;
	
}
.content ul li:hover{
	background-color:#1F8AFF;
	color:#9FFFFB;
}
h1,h2,h3,h4{
	width:100%;
}


/*Menu handle*/
.handle
{
	width:100%;
	background-color:#8E8EBF;
	text-align:left;
	box-sizing:border-box;
	padding:15px 10px;
	cursor:pointer;
	color:inherit;
	display:none;
}

/*Content*/
/*Top of page DIV*/
/*DIV at top*/

.welcome
{

	overflow:hidden;
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	text-align:center;
	color: #101124;
	
}
.welcome section
{
	width:45%;
	height:100%;
	display:inline-block;
}

.welcome img{
	float:auto;
}
.welcome section p
{

	margin-left:3%;
	margin-right:3%;
}
.welcome h1, .welcome h2, .welcome h3
{

	color:inherit;
}
.welcome p 
{
	
	margin-left:1%;
	margin-right:1%;
	padding:2%;

	font-weight:bold;
	text-align:left;
}
/*Gallery*/
.cursor
{
	background-color:#000;
	background-color: rgba(25,25,25,0.5);
	color:#858C89;
	overflow:hidden;
	height:100%;
	width:100%;
	margin:1%;
	padding:0;
	text-align:center;
	font-weight:bold;
}
.cursor section
{
	display:inline-block;
	padding:3.5%;
	border:2px solid #3B3F40;
	background-color:#2F3233;
}
.cursor a section
{
	color:#fff;
}
.cursor a section:hover ,.handle:hover
{
	background-color:#1F8AFF;
	color:#9FFFFB;
}

/*Pictures Arranged on left side*/
.leftpic
{
	border:2px solid inherit;
	background-color: rgba(250,250,250,0.5);
	float:left;
}

/*List items*/
dt
{
	font-weight:bolder;
}
ul
{
	list-style-type:none;
}
/*Paragraph arrangement*/
.content
{
	text-align:center;
	padding:1% 7%;
	/* background-color:#000;
	background-color: rgba(25,25,25,0.5);
	color:#fff;*/
	margin-left:10%;
	margin-right:10%;
}

.content p::first-letter
{
	/*padding-left:5%;
	*/
}
/*Wider DIV holding content*/

.wide/*For wider page*/
{
	margin-left:6%;
	margin-right:6%;
	text-align:left;
	color:inherit;
	overflow:hidden;
	padding:3%;
		
	font-weight:bold;
}
.wide h1,h2,h3,h4
{
	color:inherit;
}
.wide p
{
	margin-left:1%;
}

/*Header text*/
h1,h2,h3,h4
{
	text-align:center;
	
	padding:2%;
	margin:1px 1px;
	/*
	background: rgba(150,150,150,0.8)); 
	background: -webkit-linear-gradient(left, rgba(200,200,200,0) , rgba(150,150,150,0.8) , rgba(200,200,200,0));
	background: -o-linear-gradient(right,  rgba(200,200,200,0) , rgba(100,100,100,0.8) , rgba(200,200,200,0));
	background: -moz-linear-gradient(right,  rgba(200,200,200,0) , rgba(100,100,100,0.8) , rgba(200,200,200,0));
	background: linear-gradient(to right, rgba(200,200,200,0) , rgba(150,150,150,0.8) , rgba(200,200,200,0));
	*/
}

/*Images*/
div.content img, div.wide img
{
	/*border:2px solid #3B3F40;*/
	/*background-color:#2F3233;*/
}

/*Bottom of page social media links*/
/*DIV containg footer content*/
#foot
{
	background-color:#505075;
	color:#F0F0F6;
	overflow:hidden;
	text-align:center;
	

}
#foot p a:hover
{

	color:#9FFFFB;
}

#foot section
{
	width:32%;
	height:100%;
	display:inline-block;
}
#foot section ul
{
	list-style-type:none;
}
/*Color options*/
/*Gradient*/
.grad1 
{
    background: #E88407;
    background: -webkit-linear-gradient(#1F1101, #E88407 , #FFE294); 
    background: -o-linear-gradient(#1F1101, #E88407, #FFE294); 
    background: -moz-linear-gradient(#1F1101, #E88407, #FFE294); 
    background: linear-gradient(#1F1101, #E88407 , #FFE294); 
}
.grad2
{
    background: #5FADE5;
    background: -webkit-linear-gradient(#67CDFF, #E0FFF6); 
    background: -o-linear-gradient(#54BEFF, #E0FFF6); 
    background: -moz-linear-gradient(#54BEFF, #E0FFF6); 
    background: linear-gradient(#67CDFF, #E0FFF6); 
}
.grad3 /*Gradient blue to dark topdown*/
{
    background: #132529;
    background: -webkit-linear-gradient(#132529, #4C95A5); 
    background: -o-linear-gradient(#132529, #E0FFF6); 
    background: -moz-linear-gradient(#132529, #E0FFF6); 
    background: linear-gradient(#132529, #4C95A5); 
}
.grad4 /*Gradient blue to white */
{
    background: #58ACBF;
    background: -webkit-linear-gradient(#58ACBF, #E0FFF6); 
    background: -o-linear-gradient(#58ACBF, #E0FFF6); 
    background: -moz-linear-gradient(#58ACBF, #E0FFF6); 
    background: linear-gradient(#58ACBF, #E0FFF6); 
}
.grad5 /*Gradient dark blue to blue*/
{
	background: #58ACBF;
    background: -webkit-linear-gradient(#132529, #00C6CC); 
    background: -o-linear-gradient(#132529, #00C6CC); 
    background: -moz-linear-gradient(#132529, #00C6CC); 
    background: linear-gradient(#132529, #00C6CC); 
}
.grad6 /*Gradient dark green to blue*/
{
	background: #58ACBF;
    background: -webkit-linear-gradient(#071900, #00C6CC); 
    background: -o-linear-gradient(#071900, #00C6CC); 
    background: -moz-linear-gradient(#071900, #00C6CC); 
    background: linear-gradient(#071900, #00C6CC); 
}
/*Multimedia*/
.about img,video,audio, .portfolio img
{
	padding:1% 2%;
	border-radius:3px;
	background-color:rgba(0,0,0,0.5);
	border:2px double rgba(22,25,25,0.1);
}

/*Section containing social media links*/

ul.bottom
{
	list-style-type:none;
	overflow:hidden;
	
}
ul.bottom li
{

	display:block;
	overflow:hidden;
	text-align:center;
	width:100%;
}
ul.bottom li:hover
{
	background-color:#1F8AFF;
	color:#9FFFFB;
}

button , .dropList
{
	text-align:center;
	padding:3%;
		
}

.conform{
	padding:10%;
	text-align:center;
}
input, textarea{
	padding:2.7%;
	
}
.shopCartList{
	text-align:left;
	float:left;
	width:60%;

}
.purchaseBtn{
	border-radius: 15px;
	
	font-weight:bold;
	background-color: #383ED9 ;
	background: #58ACBF;
    background: -webkit-linear-gradient(#132529, #00C6CC); 
    background: -o-linear-gradient(#132529, #00C6CC); 
    background: -moz-linear-gradient(#132529, #00C6CC); 
    background: linear-gradient(#132529, #00C6CC);
	
	border:2.5px #fff solid ;
	color:#fff;
}
.purchaseBtn:hover{
	background: #58ACBF;
    background: -webkit-linear-gradient(#58ACBF, #E0FFF6); 
    background: -o-linear-gradient(#58ACBF, #E0FFF6); 
    background: -moz-linear-gradient(#58ACBF, #E0FFF6); 
    background: linear-gradient(#58ACBF, #E0FFF6);
}
input, select, textarea{
	margin:0;
	float:auto;
	font-weight:bold;
	color:#04284A;	
	background-color: #fff;
}
select:hover, input:hover{
	    background: #E0FFF6;
    background: -webkit-linear-gradient(#E0FFF6, #E0FFF6); 
    background: -o-linear-gradient(#E0FFF6, #E0FFF6); 
    background: -moz-linear-gradient(#E0FFF6, #E0FFF6); 
    background: linear-gradient(#E0FFF6, #E0FFF6); 
}