/*
 Theme Name: WDNG
 Description: The custom theme [Your Theme Name] using the parent theme Twenty Seventeen.
 Author: [You]
 Author URI: [Your URL]
 Template: twentyseventeen
 Version: 1
 */
@font-face {
    font-family: 'senlotcondensed_regular';
    src: url('fonts/Senlot/senlot_cond_regular-webfont.woff2') format('woff2'),
         url('fonts/Senlot/senlot_cond_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'senlotcondensed_italic';
    src: url('fonts/Senlot/senlot_cond_regular_italic-webfont.woff2') format('woff2'),
         url('fonts/Senlot/senlot_cond_regular_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'wwfloralcornerregular';
    src: url('fonts/floralcorner/wwfloralcorner-pvjm-webfont.woff2') format('woff2'),
         url('fonts/floralcorner/wwfloralcorner-pvjm-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'damask_dings1regular';
    src: url('fonts/damask/damaskdings1-jgpj-webfont.woff2') format('woff2'),
         url('fonts/damask/damaskdings1-jgpj-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body{
	font-family: 'senlotcondensed_regular';
	text-align:center;
	font-size:125%;
	color:#3a4d7b;
	font-variant-ligatures: common-ligatures;
}


.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
    height: auto;
}



.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
	display:block;
}
.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
	position:relative;
	padding-top:60px;/* I don't understand this */
}	


/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
  .wrap .entry-header h1.entry-title,.wrap .entry-header h2.entry-title{
  		font-size:3rem;
  }
  #top-menu li.menu-item a{
  	font-size:2rem;
  }
  .c-accordion__title{
  	font-size:1.5rem;
  }
  #guestList label{
  	font-size:2rem;
  }
#plusOneName{
  	font-size:1rem;
  }
  #plusOneName{
  	padding:0;
  }
	.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
	    height: 450px;
	}

}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
  .wrap{
  	padding:0.5rem;
  }
  .wrap .entry-header h1.entry-title,.wrap .entry-header h2.entry-title, #guestsList label{
  		font-size:2rem;
  }
  #top-menu li.menu-item a{
  	font-size:1.5rem;
  }
  .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    height: auto;
	}
	#map{
		max-width:90%;
		max-height:500px;
		margin:auto;
	}
}

.custom-logo-link{
	display:block;
	text-align:center;
	padding:0;
}
.custom-logo-link img {
	max-width: 400px !important;
	max-height: 450px !important;
	
}
#masthead .wrap {
    /* position: relative; */
	text-align: center;
}

article.post-340 .entry-header{
	display:none;
}

.wp-block-image.size-large img{
	border-radius:1rem;	
	border:1px solid white;

	-webkit-box-shadow: 0px 0px 23px 0px rgba(36,54,97,0.53);
	-moz-box-shadow: 0px 0px 23px 0px rgba(36,54,97,0.53);
	box-shadow: 0 0 0 2px #5f8859,0px 0px 23px 0px rgba(36,54,97,0.53);

}
.entry-content a:link {
	text-decoration: none;
	border-bottom: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
p{
	max-width:500px;
	margin:auto;
}
.leaflet-control-attribution{
	display:none;
}
a:link {
	text-decoration: none;
	border-bottom: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: 0;
}
.entry-content a:visited {
	text-decoration: none;
	border-bottom: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.site-content-contain{
	background:url(images/regal.png);
}


footer{
	background:url(images/morocco.png);
	-webkit-box-shadow: inset 0px 0px 39px 5px #3A4D7B; 
	box-shadow: inset 0px 0px 39px 5px #3A4D7B;
}
footer .wrap{
	background:url(images/torn.png) top center repeat-x;
}
#pjFooter a{
	font-family:senlotcondensed_italic;
	font-size:1.5rem;
	display:inline-block;
	padding:0.25rem;
	background:rgba(255,255,255,0.5);
	color:#486dc7;
	border:1px solid white;
	border-radius:1rem;
}
 .wrap {
	max-width: 100%;
}
 
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 100%;
	}
}
 
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
	max-width: 100%;
}

@media screen and (min-width: 30em) {
	.page-one-column .panel-content .wrap {
		max-width: 100%;
	}
}


.uagb-team__stack-tablet .uagb-team__wrap{
	width:25% !important;
	float:left;
}

  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-width : 320px)
    and (max-width : 480px){ 
      .mobileShow {display: inline;}
  }



  div.site-branding{
  	background: url(images/lace-runner.png) bottom center repeat-y;

  }


/* Remove front page grey gradient. */
.home .custom-header .custom-header-media::before {
display: none;
}

/* Remove page grey gradient. */
div.custom-header .custom-header-media::before{
	display: none;
}

/* Remove featured image grey gradient by setting display to none. */
div.panel-image::before {
	display: none;
}
.navigation-top{
	-webkit-box-shadow: 0px 0px 23px 0px rgba(36,54,97,0.53);
	-moz-box-shadow: 0px 0px 23px 0px rgba(36,54,97,0.53);
	box-shadow: 0px 0px 23px 0px rgba(36,54,97,0.53);
}
#top-menu{
	text-align:center;

}
#top-menu li.menu-item a{
	color:#486dc7;
	font-weight:normal;
	text-transform: uppercase;
	padding:0 1rem;
}
#top-menu li.menu-item a::after{
	display:block;
	width:0px;

	}
#top-menu li.menu-item a:hover::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	border-top:1px solid #5f8859;
    width:100%;
}

p.site-description, h3{
	color:#486dc7 !important;
	font-family:senlotcondensed_italic;
	
}

h1,h2,h3,h4, .venuesList li, .venuesList li a, label{
	color:#3a4d7b;
	font-weight:normal;
}
h4.c-accordion__title{
	padding-left:2rem;
	margin:0;
	font-family:senlotcondensed_italic;
}
.c-accordion__item ul{
	list-style:none;
	margin:0;
	padding:0;
	

}
.is-open, .venuesList{
	padding:1rem;
	border-radius:12px;
	border-bottom:2px solid #5f8859;
	border-top:2px solid #5f8859;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 0%, rgba(33,177,65,0.14049369747899154) 100%);

}
.is-open h4.c-accordion__title{
	xtext-decoration: underline;
	border-bottom:1px solid #5f8859;
	
	border-radius:10px;
}
.c-accordion__item ul li{
	padding:0;
}
.c-accordion__item ul li a{
	xpadding-right:2rem;
	color:#3a4d7b;
}

.entry-content a, 
.entry-summary a, 
.widget a, 
.site-footer .widget-area a, 
.posts-navigation a, 
.widget_authors a strong,
.entry-content a:hover, 
.entry-summary a:hover, 
.widget a:hover, 
.site-footer .widget-area a:hover, 
.posts-navigation a:hover, 
.widget_authors a strong:hover {
    box-shadow: none;
}
#promptName{
	font-family: 'senlotcondensed_italic';
	
	margin:auto;
}
#guestsList label{
	font-family: 'senlotcondensed_italic';
	display:inline-block;
}
#guestsList > div:first-child::before{
	display:inline-block;
	position:relative;
	width:100%;
	content:"Please let us know who is coming.";

}
#guestsList{
	max-width:600px;
}
  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-width : 320px)
    and (max-width : 480px){ 
      #guestsList > div:first-child::before{
			content:"Please let us know who is coming.";
		}
  }

.singleGuest::before{
	content:"" !important;
}
#guestsList div{
	padding:0;
}
label{
	cursor:pointer;
	font-weight:normal;
	max-width:350px;
	margin:auto;
}
.control-me{
	display:inline-block;
	width:100px;
	margin-left:-25px;
	margin-right:-75px;
}
.control-me::after {
    content: "\00a0";
    font-size: 2rem;
}
label{
	z-index: 20;
	position:relative;
	display:inline-block;
}
#guestsList label{
	padding-right:144px;
}

input[type=checkbox].plusOneCheck ~ .control-me::after{
	content:" ";

}

input[type=checkbox].plusOneCheck:checked ~ .control-me::after{
	content: "\2714";
	margin-left:0;
}

input[type=checkbox]{
	padding-right:144px;
}

input[type=checkbox] ~ .control-me::after {
    content: url(images/toggle-button-cant.png);
    color:#5f8859;
    text-shadow:5px 5px 10px #fff, 5px 5px 5px #ccc;
    margin-left:-144px;

	vertical-align:middle;
    
}
input[type=checkbox]:checked ~ .control-me::after {
    /*content: "\2714";*/
    content: url(images/toggle-button-will.png);

    color:#5f8859;
    text-shadow:5px 5px 10px #fff, 5px 5px 5px #ccc;
}
#guestsList input[type=checkbox] {
    position: absolute;
    left: -100vw;
    
    /* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */
}
#guestsList::before{
	xcontent:"Please click the name of each person attending.";
}
#checkboxPrompt{
	margin-top:40px;
}
#plusOneName{
	display:inline;
	text-align:center;
	font-family: 'senlotcondensed_italic';
	color:black;
	margin-left:-144px;
}
#plusOneName::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: 'senlotcondensed_italic';
	color:gray;
}
#plusOneName::-moz-placeholder { /* Firefox 19+ */
  font-family: 'senlotcondensed_italic';
	font-size:1rem;
	color:gray;
}
#plusOneName:-ms-input-placeholder { /* IE 10+ */
  font-family: 'senlotcondensed_italic';
	font-size:1rem;
	color:gray;
}
#plusOneName:-moz-placeholder { /* Firefox 18- */
  font-family: 'senlotcondensed_italic';
	font-size:1rem;
	color:gray;
}

#partyID,#guestsAttending{
	display:none;
}

.wpcf7-email{
	text-align:center;
}

input[type=submit]{
	
	font-family: 'senlotcondensed_italic';
	box-shadow: 0px 0px 12px -2px #486cc7;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(95,136,89,0.5466561624649859) 0%, rgba(255,255,255,0) 100%);
	background-color:#ffffff;
	border-radius:14px;
	border:5px solid #ede9c0;
	display:inline-block;
	cursor:pointer;
	color:#3a4d7b;
	font-size:2rem;
	padding:1rem;
	text-decoration:none;
}
input[type=submit]:hover {
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(95,136,89,0.7875525210084033) 0%, rgba(255,255,255,0) 100%);
	
}

input[type=text],input[type=email],textarea,input[type=password],input[type=date]{
	max-width:350px;
	margin:auto;
	border:1px solid #ccc;
	border-bottom:3px solid #ccc;
	border-radius: 10px;
}


.wrap .entry-header h1.entry-title,.wrap .entry-header h2.entry-title{
	font-weight:normal;
	color:#486dc7;
}


h3{
	margin:0;
	
}

.venuesList{
	list-style: none;
	position:relative;
	margin:auto;
	margin-top:3rem;
	max-width:500px;
	margin-bottom:100px;
}
.venuesList + p::after{
	content:"\2013 \2014 \2729 \2014 \2013";
	position:relative;
	display:inline-block;
	width:100%;
	font-size:3rem;
	color:#5f8859;
	
}
.venuesList::before,.venuesList::after,.venuesList .location_28::before,.venuesList .location_28::after{
	font-weight:normal;
	position:absolute;
	display:inline-block;
	color:#5f8859;
	white-space: pre;
}
.venuesList::before{
	content:"s";
	font-size:4rem;
	font-family:damask_dings1regular;
	right:-8px;
	bottom:-25px;
}

.venuesList::after{
	content:"0";
	font-size:6rem;
	font-family:damask_dings1regular;
	left:-20px;
	bottom:-30px;
}

.venuesList .location_28::before{
	content:"a";
	width:100%;
	text-align:center;
	font-size:4rem;
	font-family:wwfloralcornerregular;
	left:0px;
	top:-45px;
	transform:rotate(180deg);
}
.venuesList .location_28::after{
	content:"No";
	width:100%;
	margin-left:5px;
	text-align:center;
	font-size:4rem;
	font-family:wwfloralcornerregular;
	left:0px;
	top:-40px;
	text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;

}

.venuesList li{
	font-family:senlotcondensed_italic;
	line-height: 1.5rem;
	cursor:pointer;
}
.venuesList li .prompt{
	font-family:senlotcondensed_regular;
}

.venuesList .prompt a::after{
	content:"";
	display:block;
	margin:auto;
	clear:both;
	border-top:1px solid red;
	width:100px;
	height:10px;
	animation: pulsate 2s ease-out;
    animation-iteration-count: 10; 
    opacity: 0.0;

}

#menu-item-268::after{
	content:"";
	display:block;
	margin:auto;
	border-top:1px solid red;
	width:100px;
	height:10px;
	animation: pulsate 2s ease-out;
    animation-iteration-count: 3; 
    opacity: 0.0;
    z-index:20;
    margin-bottom:-10px;
}


@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

/* Make the element's opacity pulse*/
/* Usage
    .myElement {
        animation: opacityPulse 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 0; 
    }
*/
@-webkit-keyframes opacityPulse {
    0% {opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

/* Make the element's background pulse. I call this alertPulse because it is red. You can call it something more generic. */
/* Usage
    .myElement {
        animation: alertPulse 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 1; 
    }
*/
@-webkit-keyframes alertPulse {
    0% {background-color: #9A2727; opacity: 1;}
    50% {opacity: red; opacity: 0.75; }
    100% {opacity: #9A2727; opacity: 1;}
}


/* Make the element rotate infinitely. */
/* 
Usage
    .myElement {
        animation: rotating 3s linear infinite;
    }
*/
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#map{
	border-radius:40px;
}