/* fonts */
@font-face {
    font-family: 'trend_sansone';
    src: url('latinotype_-_trendsansone-webfont.woff2') format('woff2'),
         url('latinotype_-_trendsansone-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Futura LT';
    src: url('FuturaLT-BoldOblique.woff2') format('woff2'),
        url('FuturaLT-BoldOblique.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura LT';
    src: url('FuturaLT-Bold.woff2') format('woff2'),
        url('FuturaLT-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura LT';
    src: url('FuturaLT-Oblique.woff2') format('woff2'),
        url('FuturaLT-Oblique.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura LT';
    src: url('FuturaLT.woff2') format('woff2'),
        url('FuturaLT.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* NEW CSS for navbar */


/* header */

.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 15px 30px;
  border-right: 1px solid #f4f4f4;
  font-family: "trend_sansone";
  text-decoration: none;
  color: #003366;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  background-image: url("./images/header-004.png");
  width: 280px;
  height: 46px;
  padding: 0px 0px;
  text-decoration: none;
  
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 15px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

/* To center the DIV, thus centering all the content, we have to create a style for it. If we auto margin it, and set the width in pixels, it plops it nicely in the center. relative positioning helps it be dynamic, too. Absolute positioning would look all sorts of fucked up. */
#header-div {

  max-width: 810px;
  
  margin-left: auto;
  margin-right: auto;
  background-color: #2f719a;
  border-width: 2px;
  border-style: solid;
  border-color: #6fa0bd;
  border-radius: 10px;

}

#center-div {
  max-width: 850px;
  margin-left: auto ;
  margin-right: auto ;
 
}

#div-quote{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-weight: bold;
font-size: 9pt;
color: #FFFFFF;
text-align: center;
}

#div-twitter{

    position: fixed;
    top: 0px;
    right: 0px;
}

/* For the DIV enclosing the FaceBook comments - sadly, FB doesn't allow too much control, but we can do BG color and positioning */
div.fbcomment {
background-color: #e9d2b0;
color: #ffFFFF;
width: 500px;

position: relative;
margin-left: auto;
margin-right: auto;
}

div.socmedia{
margin-left: 35px;
}

table.main {

/*background-color: #c0c4c7;

border-style: solid;
border-width: 0px;
border-color: #cce0e4;*/

color: #000000
font-family: Tahoma;
font-weight: lighter;
font-size: 10pt;


}

div.list {

background-color: #cccccc;

border-style: solid;
border-width: 3px;
border-color: #333333;

color: #ffffff;
font-family: Tahoma;
font-weight: lighter;
font-size: 10pt;
border-radius: 10px;

}

div.gallist {

background-color: #cccccc;

border-style: solid;
border-width: 1px;
border-color: #000000;

color: #ffffff;
font-family: Tahoma;
font-weight: lighter;
font-size: 10pt;
text-align: center;
padding-bottom: 50px;
}


/* the table used for editing in the mgt console */


table.edit{ 
background-color: #222222;
border-style: solid;
border-width: 2px;
border-color: #FFFFFF;
color: #ffffff;
font-family: courier, sans-serif;
font-weight: lighter;
font-size: 10pt;
} 

td.main{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 16pt;
color: #333333;
margin-left: 20px;
}

td.contact{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 16pt;
color: #333333;
margin-left: 80px;
}

/* here's where we define some style for text elements and that line thingy. Easy enough, right? */

hr {
border-style: dashed;
color: #CCCCCC;
}

p {
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
color: #000000;
}

p.id {
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
color: #000000;
font-weight: normal;
font-size: 18px;
margin-top: 10px;
margin-left: 25px;
margin-right: 25px;
}

p.glr {
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
color: #000000;
font-weight: bold;
font-size: 14px;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
}

p.contact {
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
color: #000000;
font-weight: bold;
font-size: 14px;
margin-top: 10px;
margin-left: 75px;
margin-right: 25px;
}

p.quote {
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-style: italic;
font-size: 14px;
margin-top: 10px;
margin-left: 25px;
margin-right: 25px;
}

/* used for the datestamp */

h1.date{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 12pt;
color: #5387aa;
text-align: right;
margin-right: 30px;
}

h1.id{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 24pt;
color: #000000;
font-weight: bold;
margin-left: 15px;
margin-top: 2px;
}

h1.comments{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 12pt;
color: #0099ff;
margin-left: 15px;
}

h1.tag{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 16pt;
color: #5387aa;
}



/* used for the mgt console */

h1.manage{
font-family: sans-serif;
font-size: 14pt;
color: #ffffff;
}



/* used for the content area on teh page */


h1.main{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 18pt;
font-weight: bold;
color: #6699cc;
}


/* Here, we set ABSOLUTE defaults. If you use any H1, for example, it uses the default properties below, unless specified otherwise. If we wanted to use a different style, we'd use, say, h1.main. Setting styles IN HTML will be discussed in a sec */

h1{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 14pt;
color: #333333;
}



h2{
font-family: Consolas, monaco, courier, monospace;
font-size: 14pt;
color: #ffffff;
}



h3{
font-family: 'Futura LT', helvetica, Tahoma, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #555555;
}


h4{
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 16pt;
color: #ffffff;
}



h5{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-weight: l;
font-size: 10pt;
color: #666666;
}



h5.smalltext{
font-family: "courier new", courier, sans-serif;
font-size: 8pt;
font-weight: lighter;
color: #333333;
margin-bottom: 3px;
}

/* flavor */

i.subnote{
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-size: 8pt;
font-weight: lighter;
font-style: italic;
color: #333333;
}


/* some image styles, for various purposes.*/


#img-listthumb {
    border-width: 2px;
    border-style: solid;
    border-color: #e8bc7a;
	border-radius: 8px;
    margin-left: 35px;
    margin-right: 10px;
    margin-top: 0px;
    float: left;
}

#img-listbig{
border-width: 2px;
border-style: solid;
border-color: #2f719a;
border-radius: 15px;
margin-left: 50px;
margin-right: 50px;
margin-top: 0px;
width: 60%;
height: auto;

}

.img-galthumb{
border-width: 0px;
border-style: solid;
border-color: #e8bc7a;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 100%; 
height: 100%;
border-radius: 5px 5px 0 0;


}

#img-listthumb-gallery{
border-width: 2px;
border-style: solid;
border-color: #0066cc;
margin-left: 35px;
margin-right: 10px;
margin-top: 0px;
float: left;
}

img.content{
border-width: 4px;
border-style: solid;
border-color: #003366;
max-width: 95%;

}

img.comments{
margin-left: 5px;
}

img.fx2{
border-width: 2px;
border-style: dotted;
border-color: #ffffff;
}

img.fx3{
border-width: 1px;
border-style: solid;
border-color: #ffffff;
}

/* cards for gallery */

/* Float four columns side by side */
.column {
  
  width: 25%;
  padding: 0 10px;
 display: inline-block;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 0 0 2px 0;
  text-align: center;
  background-color: #f1f1f1;
  border-radius: 5px 5px 5px 5px;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 400px) {
  .column {
    width: 90%;
    display: block;
    margin-bottom: 20px;
  }
  .img-galthumb{
border-width: 0px;
border-style: solid;
border-color: #e8bc7a;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 100%; 
border-radius: 5px 5px 0 0;


}
.column {
  
  width: 90%;
  padding: 0 10px;
 display: inline-block;
}

}
/* setting default text modifiers. Bolds, underlines, lists, etc */

b{

font-weight: bold;

}

ul {
color: #ffffff;
border-color: #ffffff;
}

ol {
color: #ffffff;
border-color: #ffffff;
}


/* set body properties */

#body-main {
	color: #6699cc;
	background-color: #ffffff;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	background: url('./images/bg-wscom-003.jpg') no-repeat center fixed;  
	background-size: cover;
}


/* setting link properties for active, visited and unvisisted.*/


a.m1:active{
text-decoration: none;

font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-weight: bolder;
font-size: 12pt;
color: #6666FF;
}

a.m1:visited{
text-decoration: none;

font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-weight: bolder;
font-size: 12pt;
color: #3399cc;

}

a.m1:link{

text-decoration: none;
font-family: 'Futura LT', helvetica, tahoma, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #0066ff;

}



a.id:visited{
text-decoration: none;

font-family: 'Futura LT', helvetica, tahoma, sans-serif;

font-size: 12pt;
color: #999999;

}

a.id:link{

text-decoration: none;
font-family: 'Futura LT', helvetica, tahoma, sans-serif;

font-size: 12pt;
color: #3399cc;

}

/*MODAL IMAGE CODE*/

.thumbnail {
  
}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 90%;
	margin-top: 2%;
	border-width: 5px;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
}
.lightbox p {
	/** Pad the lightbox image */
max-width: 390px;
max-height: 90%;
margin-top: 2%;
border-width: 5px;
border-style: solid;
border-color: #FFFFFF;
border-radius: 5px;
text-decoration: none;
text-align: center;
display: inline-block;
font-size: 10pt;
background: white;
color: #565555;
font-weight: bold;
padding: 5px;
}


.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}


/*search box */
.css-input {
     padding: 5px;
     font-size: 15px;
     border-width: 2px;
     border-color: #003366;
     background-color: #FFFFFF;
     color: #000000;
     border-style: solid;
     border-radius: 25px;
     box-shadow: 0px 0px 0px rgba(66,66,66,.75);
     text-shadow: 0px 0px 0px rgba(66,66,66,.75);
	 margin-top: 8px;
	position: relative;
	top: -4px;
	left: 10px;
}
 .css-input:focus {
     outline:none;
}