/* Remove default margin/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove bullet points */
li {list-style: none;}

/* Remove underline  */
a {text-decoration: none;}

#page {
  max-width: 1100px;
  margin: auto;
}

.no-border {
  border: none!important;
}

/* Hide ReCaptcha Badge*/
div.grecaptcha-badge { display: none!important; }


/*************************************************************************************************************************************************************************************************************************************************

Main Styles

*/

#main {
  padding-top: 20px;
}

/* Header Styles
***********************************************************************************************************************************************************************/
header {
  background-color: white;
    position: fixed;
    top: 0;
    height: 70px;
    width: 100%;
    box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
    z-index: 1;
}

.black {
  background-color: black;
  color: white;
}

/* Logo */
.logo-cont {
  float: left;
  height: 50px;
}

.logo {
    height: 70px;
    padding: 15px 0px 5px 20px;

}

.burger-cont {
  float: right;
}

.nav-cont {
    background-color: black;
    clear: both;
    display: none;
    opacity: 0.9;
}

.sub-menu {
    padding-left: 15px;
    padding-top: 9px;
}

#menu-global-nav {
	padding-bottom: 100%;
  padding-top: 15px;
}

#menu-global-nav li {
    padding: 10px 10px 10px 20px;
}

#menu-global-nav a {
  color: white;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 300;
  border-bottom: none;
  line-height: 1.2em;
}

div.wp-block-image {

    padding: 0px 20px 0px 20px;
}

/* Content */
#content {
    margin-top: 70px; /* push the content, so it displays after the header */
}

/* Styles for screens that are bigger than 600 ps
Large Screen styles
**********************************************************************************************************************************************************************************************/

@media screen and (min-width: 700px) {
  .burger-cont {
    display: none;
  }

  #main {
    padding-top: 40px;
  }

  .nav-cont {
    background-color: white; /* To overrule the black rule from above */
    height: 100px;
    display: block;
    clear: none;
    opacity: 1;
  }
  .global-nav {
    height: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .nav-cont li {
    display: inline;
  }
  header {
    max-width: 1100px;
    height: 100px;
  }
  .logo-cont {
        height: 100px;
        padding-top: 25px;
  }
  .logo {
        height: 70px;
        padding: 15px 0px 5px 20px;
  }
  .sub-menu {
        display: none;

  }

  #menu-global-nav {
  	padding-bottom: 0;
  }

  #menu-global-nav a {
    color: grey;
    font-weight: 300;
    font-size: 1em;
    line-height: 2em;
  }
  #menu-global-nav a:hover {
    color: black;
        font-weight: 400;
  }
  /* Content */
  #content {
      margin-top: 100px; /* push the content, so it displays after the header */
  }

}



/* Projects Container
*******************************************************************************************************************************************************************************************************************/

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-row-gap: 40px;
}


/* Body Copy Styles
*******************************************************************************************************************************************************************************************************************/

html, h1, h2, h3, h4, p, #content a, #content {
  font-family: 'Lato', sans-serif;
  color: #505050;
}

h2 {
    padding: 15px 0px 10px 20px;
}


h2:first-of-type {
  padding-top: 20px;
}

h3 {
    padding-left: 20px;
    padding-top: 10px;
}

p, div.fts-jal-fb-message {
    padding: 5px 20px 10px 20px;
    line-height: 1.3em;
    font-size: 1.1em;
    font-weight: 300;
}



/* Excerpt styles
 */

a.excerpt {
  text-transform: none!important;
  font-weight: 400;
}


/* Link styles
 * https://www.w3schools.com/css/css_pseudo_classes.asp
*/

/* unvisited link */
a:link {
    color: #505050;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    line-height: 2em;

    padding-bottom: 3px;
    border-bottom: thin solid #505050;
}

/* visited link */
a:visited {
 color: #909090!important;
 border-bottom: thin solid #909090!important;
}

/* mouse over link */
a:hover {
 color: #909090!important;
 border-bottom: thin solid #909090;
}

/* selected link */
a:active {
 color: #909090;
 padding-top: 2px;
}

a.logo-link {
   border-bottom: none;
}


/* Inline Link Styles */

#main p a {
    line-height: 1.5em;
    font-weight: 300;
    font-size: 1em;
}

/* Button styles from:
 * https://css-tricks.com/overriding-default-button-styles/
 * (modified)
 */

 button {
   width: 70px;
   height: 70px;
    display: inline-block;
    border: none;
    margin: 0;
    text-decoration: none;
    color: black;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out,
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover,
button:focus {
    background: black;
    color: white;
}
/*
button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}
*/
button:active {
  background: black;
  color: white;
}

.attachment-post-thumbnail {
	height: auto;
	max-width: 100%;
  padding: 0px 20px;
}


/*
RANDOM BANNER
*****************************************************************************************************************************************************/

#random-banner {
	min-height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.imgOne {
  background-image: url("https://wildbro.com/wp-content/uploads/2019/08/IMG_3351.jpg");
}

.imgTwo {
  background-image: url("https://wildbro.com/wp-content/uploads/2019/10/para-web.jpg");
  background-position: top !important;
}
/*
.imgThree {
  background-image: url("https://wildbro.com/wp-content/uploads/2019/08/frenchinred-crop.jpg");
  transform-origin:  top;
}
*/
.imgFour {
  background-image: url("https://wildbro.com/wp-content/uploads/2019/08/master_sol-red.jpg");
}

.imgFive {
  background-image: url("https://wildbro.com/wp-content/uploads/2019/11/logo-gris-blanco.png");
}

/* It' a list item that containts a heading one */
.randomTitle {
  margin-bottom: 20px;
}

/*

  #improve
  create a more direct way of accessing this particualr element
  because why random banner a
  when it could be just a

*/
#random-banner a {
  color: white;
  background-color: black;
  font-weight: 300;
  font-size: 25px;
  padding: 15px 10px 10px 10px;
  border-bottom: none;
}

#random-banner a:hover {
  color: white!important;
}

#random-banner a:visited {
  color: white!important;
}


#random-banner h1 {
  display: inline;
  color: white;
  padding: 20px 10px 10px 10px;
  margin-bottom: 10px;
}

/***********
Contact Page Form
*************/

.wpcf7-form-control {
    height: 40px;
    width: 100%;
    margin-top: 3px;
    border: 0.1 solid lightgrey;
}

.wpcf7-textarea {
    height: 200px;
}

.wpcf7-submit {
    height: 50px;
    background-color: lightgrey;
    font-size: 1em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    color: #505050;
}


/***********
Footer Styles
*************/

.footer-nav-container {
	/* opacity: 0.8; for some reason it messes up the full black border bottom effect of top nav */
}

.footer-nav-container {
  padding-bottom: 30px;
  clear: both;
}

#secondary-menu:first-child {
	margin-top: 20px;
  padding-top: 50px;
}

/* Hide the home link */
.page-item-31 {
	display: none;
}

#secondary-menu li {
	padding: 5px 0px 5px 20px;
}

#secondary-menu a {
	color: grey;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	border-bottom: 0.1px solid lightgrey;
}

#secondary-menu a:hover {
	color: black;
	border-bottom: 0.5px solid black;
}

.children {
	margin-top: 9px;
}

.copyright {
  color: lightgrey;
  font-weight: 300;
}



/* Project Drop Down */
/*
.sub-menu {
  position: absolute;
  background-color: black;
  padding: 0;
  margin: 0;
  display: none;
  margin-left: -12px;
  padding-left: 10px;
}

#menu-global-nav ul.sub-menu li {
  margin: 0;
  padding: 0;
  border: none;
}

#menu-item-42:hover .sub-menu {
  display: block;
}
#menu-item-42:hover {
  background-color: black;
}

#menu-item-42 a:hover {
  color: white;
}
*/

/* iFrame Styles
*/

iframe {
    width: 100%!important;
}


/*

/news page custom styles

*/

.entry-content-page {
    max-width: 600px;
}

span.fts-jal-fb-user-name a {
    line-height: normal;
}

/*

  Custom styles for the third project page - Jazz fusion fra Syden
  https://wildbro.com/projects/avantgarde-jazzfusion/

  the important is added to overwrite other styles
  that are set for images
  #improve

*/

.band-logo {

  padding-top: 100px!important;
}

.hide {
  display: none;
}

/*

  Hide heading one from specific pages:
  - Friends
  - Contact
  - About

*/

.page-id-21 h1, .page-id-23 h1, .page-id-17 h1 {
	display: none;
}

#title-heading {
    padding: 5px 20px 10px 20px;
}