


@import "../fontawesome/font-awesome";
@import "../fontawesome/solid";
@import "../fontawesome/brands";


/* declare a */
$turquoise:#16a0a0;
$turquoise2:#00ffff;
$seablue:#007f7f;
$darkgreen:#007f00;
$palegreen:#827f00;
$red:#ff0000;
$mygray:#cccccc;
$purple: #9f009f;
$purple2:#ff00ff;
$green:  #007f7f;
$brown: #7f0000;
$brown2:#8B4513;
$orange: #d96b26;
$yellow:#ede013;
$brand-primary: $green;
$font-stack:    Helvetica, sans-serif;
$blue:#6200ff;
$beige:#e2b877;
$cream:#e2d4be;
$gold:#daa520;

$lightyellow:#FFFFE0;
$lemonchiffon:#FFFACD;
$papay:#FFEFD5;
$moccasin:#FFE4B5;

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

@mixin left-margin-minus
{
margin-left:-0rem;
}
@mixin left-margin
{
left-margin:1rem;
}
@mixin justify-center
{
align-self:center;
}
@mixin left-margin-2
{
margin-left:3rem;
}

@mixin right-margin
{
margin-right:1rem;
}

@mixin margin

{
margin-left:2rem;
margin-right:2rem;
}
@mixin left
{
align-self:flex-start;
}

@mixin right
{
align-self:flex-end;
}

@mixin center
{
align-self:center;
}

br.clearfix
{
@include clearfix;
}


a.navbar-brand
		
		{
			color:$brown;
			
		}
		
		.navbar-toggler-icon
		{
			background-color: orange;
			text-shadow: 2px 2px;
		}
		
		
		
 li.nav-item 	a.nav-link:link 
		
		{
			color:$brown2;
			
	    }		
    
  
  li.nav-item 	a.nav-link:hover 
		
		{
			
			background-color:$lemonchiffon;
			
	    }		
    div.center
    {
    width:100%;
    display:flex;
    text-align:center;
    }
  
  
  div.dropdown-menu p
  
  {
  text-align:center;
  color:black;
  font-weight:bold;
  }
  

li a.dropdown-item:link
{
text-align:center;
}


li  a.dropdown-item:hover 
{
text-align:center;
 color:black; 
 background:yellow;
}













.btn
{
@include margin;
}

h1#quikhand

{
@include center;

font-family: 'bellefairregular';
color:$purple2;

font-weight:regular;
font-size:6rem;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

/* font is not quikhand but all media breaks use it */
}

h1#quikhand::first-letter {
 font-family: 'amadeus_regularamadeusRg';
  
  
    
    color: $gold;
    font-weight:regular;
  }
h4.bellefair

{
font-family: 'bellefairregular';
@include margin;
font-size:1.6rem;
color:black;
font-weight:normal;
font-style: oblique;

}

h3.links
{
letter-spacing:4px;
@include margin;

}

h8,h9,h10,h11,h12,h13
{
font-family: 'bellefairregular';
}


h8
{
color:$seablue;
}
h9
{
color:$blue;
}
h10
{
color:$darkgreen;
}
h11
{
color:$brown;
}
h12
{
color:$purple2;
}
h13

{
@include margin;
color:$darkgreen;
font-size:1.6rem;
font-weight:normal;
font-style: oblique;

}    




h8,h9,h10,h11,h12

{
flex-shrink:1;
@include margin;
}

h1.dumb2
{
 font-family: '2dumbregular';
 @include margin;

color:$red;
}
h1.bellefair
{
font-family: 'bellefairregular';
@include margin;

color:$blue;
}

h1.quikhand

{
font-family: 'quikhandregular';
color:$brown2;

@include left-margin;
}

h1.dumb

{
font-family: '2dumbregular';

@include left-margin;
color:$yellow;
}


h1.blackjack
{
font-family: 'bellefairegular';

@include left-margin;
color:$brown;
}

h1.grandhotel

{
 font-family: 'grand_hotelregular';
 
@include left-margin;
color:$purple;
}

div.header

{
color:blue;
display:flex;
flex-direction:column;
width:100%;
/*background:url("../images/header.png");*/
/*flex-basis:160px;*/
flex-wrap:nowrap;
background-repeat: no-repeat;
background-size:stretch;


}

div.header div.logo 
{
display:flex;
width:120px;
align-self:flex-start;
}

div.logo img
{
@include left-margin;
width:100%;
}


div.title
{
display:flex;
flex-direction:column;
flex-basis:90px;
align-self:center;
align-items:flex-start;
justify-content:flex-start;
flex-shrink:1;
flex-grow:2;

}

div.captcha

{
display:flex;
flex-direction:row;
width:100%;
justify-content:center;
}

div.captcha IMG 

{
flex-basis:50px;
}


div.homelinks
{

display:flex;
flex-direction:row;
width:100%;
justify-content:space-between;

}

div.hlinkitem
{
display:flex;
@include margin;
flex-basis:200px;
flex-shrink:3;

}

div.hlinkitem a.link  .img-fluid

{
display:flex;
width:93%;
height:auto;

border-style:hidden;



}


div.link

{
display:flex;
flex-direction:row;
width:100%;
justify-content:space-between;


}

div.linkImage
{
display:flex;

}



div.footer
{
display:flex;

flex-direction:column;
flex-wrap:nowrap;
/*   */
background-color:#fd7eed;
/*  background:url("../images/footer.png"); */
background-size:100%;
 
}

div.iconwrapper

{
display:flex;
width:100%;
height:auto;
flex-direction:row;
justify-content:space-around;
align-items:stretch;


}

div.icon
{
display:flex;

align-self:flex-end;
}







div.icon h4
{
display:flex;

font-size:1.2rem;
color:black;
font-weight:normal;

}


div.center

{

display:flex;
 
@include left;

}
div.flex1

{

display:flex;
justify-content:space-between;
flex-wrap:nowrap;
width:100%;
min-height:60vh;
flex-direction:row;

}
div.textbox


{
    @include left-margin;
	flex-basis:70%;
	
	flex-grow:3;
}

div.textbox textarea

{

width:95%;

}

div.portfolio

{
display:flex;

flex-wrap:wrap;

}
div.thumb

{
display:flex;
flex-direction:column;
text-align:center;

width:150px;
margin-top:5px;
@include margin;
border-style:solid;
border-color:black;
}


div.thumb .img-fluid
{
width:90%;

}



div.item

{
display:flex;
flex-direction:column;
text-align:center;
flex-basis:300px;
width:290px;
margin-top:5px;
@include margin;
}

 div.item .img-fluid

{
display:flex;
transition:  transform ease-in-out 1.3s;
 filter: brightness(99%);
width:90%;
align-items:flex-start;
border: 5px solid #555;

}

div.item:hover  .img-fluid
{
display:flex;



width:90%;

align-items:flex-start;
border: 5px solid #555;



}


div.editinfo

{
@include right-margin;
background-color:$cream;
flex-basis:30%;
flex-grow:0;
flex-shrink:1;
}

div.flex2

{

display:flex;

width:100%;

flex-direction:column;
min-height:70vh;


align-items:stretch;
background-image:url("../images/contentBk.png");
background-size:100%;

}


div.content
{

flex-grow:1;

width:100%;




}





div.flex2 p

{
font-family: 'bellefairregular';
font-size:1.5rem;
line-height:140%;
@include margin;

}
div.blog
{
display:inline-flex;
flex-direction:row;
justify-content:flex-start;

flex-wrap:nowrap;

}
 div.blogRight


{

display:flex;
flex-direction:column;
width:70%;

flex-shrink:4;
flex-grow:0;
}
 div.blogLeft

{
@include margin;
display:flex;

flex-direction:row;

width:29%;

}

 div.blog div.blogLeft    .img-fluid

{
display:flex;
width:93%;
height:auto;
border: 5px solid #555;
}



div.productInfo
{
display:flex;
flex-direction:column;

width:350px;

text-align:center;
}

div.productInfo .img-fluid


 {
 display:flex;
 transition:  transform ease-in-out 1.3s;
 filter: brightness(92%);
 flex-basis:290px;

align-items:flex-start;
border: 5px solid #555;

 @include margin;
 
    
}


div.productInfo:hover .img-fluid

{
display:flex;

transform: scale(1.5)  translateX(30%);   


filter: brightness(100%);

/*width:91%;*/

/*align-items:flex-start;*/
/*border: 5px solid #555;*/
}





div.twothirdleft

{
@include left-margin;

flex-basis:70%;
flex-grow:3;
align-self:stretch;

}

div.onethirdright
{
@include right-margin;
background-color:$cream;
flex-basis:30%;
flex-shrink:4;
}

/* logo flip and crow stuff  */
img#bounce
{
position:relative;
left:10px;
top:30px;
}
img#crow
{
position:relative;
left:10px;
top:30px;
}
 img#gb
{
display:inline;
}
 img#gbFlip
{
display:none;
}
    
p#toggle

{
font-family: 'bellefairregular';
font-size:1.3rem;
color:black;
font-weight:normal;
font-style: oblique;
}    
    
p#toggle h13

{
@include left-margin-minus;
font-family: 'bellefairregular';
color:$darkgreen;
font-size:1.6rem;
font-weight:normal;
font-style: oblique;

}    
   
p#toggle h4

{
font-family: 'bellefairregular';
font-size:1.3rem;
color:black;
font-weight:normal;
font-style: oblique;
}   
   
   
   
    
p#andy

{
font-family:Arial;
font-weight:bold;
color:$red;
font-size:16px;

} 
.clearfix
{
clear:both;
}

div.editinfo table.andy
{
width:100%;
}

table.andy th,td {
   border: 1px solid black;
   padding: 5px;
}

/*_______________________________________________________________
*
*1st break point 
*_________________________________________________________________
*
 */
@media  (max-width: 480px) 

    {
	
	
	h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:2.0rem;
		  text-align:center;
	}    
		
		
	h1#quikhand
	
	{
	font-size:2.0rem;
	
	}	

		
		
		
		
		
		
		h8,h9,h10,h11,h12
		{
		font-size:1.4rem;
		
		
		
		}	
		
		 
		 
		  div.iconwrapper
		{
		display:flex;
		flex-direction:column;
		}
		
	
div.homelinks
{

display:flex;
flex-shrink:3;
flex-direction:column;
align-items:center;
justify-content:space-between;

}	
	
		

div.hlinkitem
{
display:flex;


width:45%;
margin-bottom:20px;

justify-content:flex-start;

}

div.hlinkitem img
{
display:flex;
flex-direction:column;
justify-content:space-between;
margin-top:15px;
width:90%x;


}



		
		
		div.icon
		{
		display:flex;
		/*align-self:flex-end;*/
		font-size:1.8rem;
		align-self:center;
		margin-bottom:1.8rem;
		
		}
		
		
      
        div.icon img
        {
        width:3rem;
        } 



		div.flex2 p

		{
		@include margin;
		font-family: 'bellefairregular';
		font-size:1.25rem;
		line-height:105%;
		}
	

div.link

{
display:flex;
flex-direction:column;
width:100%;
justify-content:space-between;
align-items:center;

}

div.linkImage
{
self-align:center;
display:flex;
width:45%;


}

div.linkImage img

{
display:flex;
width:90%;
height:auto;

}


div.blog
{
display:inline-flex;
flex-direction:column;
justify-content:center;
}
div.blogLeft
{
display:flex;
flex-direction:row;
width:95%;
}

div.blogLeft img-fluid , img 
{
display:flex;
self-align:center;
width:98%;
}

div.blogRight
{
width:98%;
display:flex;
flex-direction:column;

flex-shrink:4;
}






}/*   end 1st */



/*
--------------------------------------------------------------

2nd media break point 
---------------------------------------------------------------

*/


@media  (min-width : 481px) and (max-width:767px) and (orientation:portrait)
{
	

	h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:1.6rem;
		  text-align:center;
	}    
		
	h1#quikhand 

{
font-size:2.2rem;
text-align:center;
}		
		
		
		
		h8,h9,h10,h11,h12
	{
	font-size:1.5rem;
	
	}	
	
		 
		 
		 
		div.iconwrapper
		{
		display:flex;
		flex-direction:column;
		}
		
		div.icon
		{
		display:flex;
		
		font-size:1.8rem;
		align-self:center;
		margin-bottom:1.8rem;
		
		}
         
         div.icon img
        {
        width:3.8rem;
        } 
		div.flex2 p

		{
		@include margin;
		font-family: 'bellefairregular';
		font-size:1.3rem;
		line-height:110%;
		}
		
div.link

{
display:flex;
flex-direction:column;
width:100%;
justify-content:space-between;
flex-wrap:wrap;
align-items:center;
}

div.linkImage
{
display:flex;
width:25%;

}
div.linkImage img

{
width:90%;
height:auto;
}



div.homelinks
{

display:flex;
flex-shrink:3;
flex-direction:column;
align-items:center;
justify-content:space-between;

}	
	
		

div.hlinkitem
{
display:flex;


width:33%;
height:auto;
align-items:flex-start;
margin-bottom:40px;
}

div.hlinkitem img
{
display:flex;
flex-direction:column;
justify-content:space-between;
margin-top:15px;
width:40%px;
height:auto;

align-self:center;
}



div.blog

{
display:flex;

width:100%;

}

div.blog
{
display:inline-flex;
flex-direction:column;
justify-content:space-around;
}
div.blogLeft
{
display:flex;
flex-direction:row;
width:95%;
justify-content:center;
}

div.blogLeft .img-fluid , .img 
{
display:flex;
/*self-align:center*/
width:70%;
}

div.blogRight
{
width:98%;
display:flex;
flex-direction:column;

flex-shrink:4;
}


}
/*

----------------------------------------------------------------

3 rd media breakpoint 

----------------------------------------------------------

*/
@media (min-width:768px)and (max-width:1024px) and (orientation:landscape)
{

	h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:2.0rem;
		  text-align:center;
	}    
	
	h1#quikhand 

{
font-size:2.8rem;
text-align:center;
}	
	
	
	
	h8,h9,h10,h11,h12
	{
	font-size:1.5rem;
	
	}
	
			
	h1#quikhand
		{
		  font-size:2.5rem;
		  text-align:center;
		}
		 
		 
		 
		div.iconwrapper
		{
		display:flex;
		flex-direction:row;
		}
		div.icon
		{
		 
			
			display:flex;

			align-self:flex-end;

		font-size:2.0rem;
		align-self:center;
		
		margin-bottom:2.0rem;
		}
        div.icon img
        {
        width:4.0rem;
        } 

  
		div.flex2 p

		{
		@include margin;
		font-family: 'bellefairregular';
		font-size:1.25rem;
		line-height:105%;
		}
	
	
		div.link

{
display:flex;
flex-direction:row;
width:100%;
justify-content:space-around;

align-items:center;
}

div.linkImage
{
display:flex;
flex-wrap:wrap;
width:25%;

}


div.linkImage img

{
width:90%;
height:auto;
}



div.homelinks
{

display:flex;
flex-shrink:3;
flex-direction:row;
align-items:center;
justify-content:space-between;

}	
	
		

div.hlinkitem
{
display:flex;


width:50%;
height:auto;
align-items:flex-start;

}

div.hlinkitem img
{
display:flex;
flex-direction:column;
justify-content:space-between;
margin-top:15px;
width:65%;

align-self:center;
}


div.blog
{

display:inline-flex;
flex-direction:column;
wrap:wrap;

}
div.blogLeft
{
display:flex;
flex-direction:row;
width:28%;
justify-content:center;
flex-shrink:0;
flex-grow:4;
}

div.blogLeft .img-fluid , .img 
{
display:flex;
border: 2px solid black;
/*self-align:center*/
width:90%;
height:auto;
margin:10px;
}

div.blogRight
{
display:flex;
width:68%;
margin-right:5px;
flex-shrink:4;
flex-grow:0;
}




}



/*
------------------------------------------------------

 4th media breakpoint



----------------------------------------------------------

*/


@media (min-width:768px)and (max-width:1024px) and (orientation:portrait)
{
	h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:2.5rem;
		  text-align:left;
	}    
		
	h1#quikhand 

{
font-size:3.2rem;
text-align:center;
}		
		
	h8,h9,h10,h11,h12
	{
	font-size:1.8rem;
	
	}	
			
	
		 
		 
		div.iconwrapper
		{
		display:flex;
		flex-direction:row;
		}
		div.icon
		{
		font-size:2.5rem;
		align-self:center;
		margin-bottom:2.0rem;
		
		}
        div.icon img
        {
        width:5rem;
        } 


       
		div.flex2 p

		{
		@include margin;
		font-family: 'bellefairregular';
		font-size:1.25rem;
		line-height:105%;
		}
	
	
	
	
	
	div.link

{
display:flex;
flex-direction:column;
width:100%;
justify-content:space-around;
flex-wrap:wrap;
align-items:center;
}

div.linkImage
{
display:flex;
width:45%;

}
	
	div.linkImage img

{
width:90%;
height:auto;
}

	div.blog
{

display:inline-flex;
flex-direction:row;
wrap:nowrap;

}
div.blogLeft
{
display:flex;
flex-direction:row;
width:28%;
justify-content:center;
flex-shrink:4;
}

div.blogLeft .img-fluid , .img 
{
display:flex;
border: 2px solid black;
/*self-align:center*/
width:90%;

}

div.blogRight
{
display:flex;
width:68%;
margin-right:5px;
flex-shrink:0;
flex-grow:2;
}

	
	
	
}
/*

-------------------------------------------------------------------

5 th media break point 

---------------------------------------------------------
*/




@media (min-width:1025px)and (max-width:1280px) 
{
h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:2.5rem;
		  text-align:left;
	}    
	
	h1#quikhand 

{
font-size:3.2rem;
text-align:center;
}	
	
	
	
	
	h8,h9,h10,h11,h12
	{
	font-size:1.8rem;
	
	}
			
	
		 
		 
		  
		div.iconwrapper
		{
		display:flex;
		flex-direction:row;
		}
		
		div.icon
{
        display:flex;
        flex-direction:row;

		font-size:2.5rem;
		align-self:center;
		margin-bottom:2.5rem;
		
		}

        div.icon img
        {
        width:3.5rem;
        } 


		div.flex2 p

		{
		@include margin;
		font-family: 'bellefairregular';
		font-size:1.25rem;
		line-height:105%;
		}


div.link

{
display:flex;
flex-direction:row;
width:100%;
justify-content:space-between;


}

div.linkImage
{
display:flex;
width:24%;

}
	
	div.linkImage img

{
width:90%;
height:auto;
}


div.blog
{
display:flex;



}








}


/*
*
*-------------------------------------------------------------
*
* 6th media break point 
*---------------------------------------------------------------
*/



@media (min-width:1281px) 

{
	
    h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:2.2rem;
	text-align:left;
	}    
		
		
	h1#quikhand 

	{
	font-size:3.5rem;
	text-align:center;
	}		
			
			
		
		
		
	h8,h9,h10,h11,h12
	{
	font-size:1.9rem;
	
	}	
		
		
		
			
	
		 
		 
		
		div.iconwrapper
		{
		display:flex;
		flex-direction:row;
		
		}
		div.icon
		{
		
		

        display:flex;



		font-size:2.5rem;
		align-self:center;
		margin-bottom:3.0rem;
		
		}

        div.icon img
        {
        width:3.8rem;
        } 


		div.flex2 p

		{
		@include margin;
		font-family: 'bellefairregular';
		font-size:1.25rem;
		line-height:105%;
		}

		div.link

{
display:flex;
flex-direction:row;
width:100%;
justify-content:space-around;
flex-wrap:nowrap;
align-items:center;
}

div.linkImage
{
display:flex;
width:22%;
}
div.blog

{
display:flex;

}
}

/* ----------- iPad Pro ----------- /
/ Portrait and Landscape */
@media (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) 


{
 h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
	{
	font-size:2.2rem;
	text-align:left;
	}    

}
  

