/*CSS style sheet for Durango Line Dancers Website*/

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

#wrapper {
    width:100%;
    margin:0 auto;
}


header {
  
    width:100%;
    position:fixed;
    background:white;
    top:0;
    left:0;
    z-index:1000;
    clear:bottom;
    overflow:hidden;
    
}

.logo {
    float:left;
    margin-left:20px;
    display:inline-block;
    margin-bottom:10px;
  
}

.mobilelogo {
    display:none;
}

.fas {
    display:none;
}


nav {
    margin-top:35px;
    width:45%;
    float:right;
    margin-right:0;
}

nav ul {
    float:right;
    
    width:100%;

}

nav li {
    float:left;
    margin-left:2%;
    list-style-type:none;
   
}

nav li:first-of-type {
    margin-left:0;
}

nav li:last-of-type {
    margin-right:0;
}


nav li a {
    color:#000;
    text-decoration:none;
    display:inline-block;
    text-align:center;
    padding:10px;
    border-radius:10px;

}

nav li a:first-of-type {
    margin-left:0;
}

nav li a:last-of-type {
    margin-right:0;
}

nav a:hover {
    background-color:#834061;
    color:white;
  
}

.home nav li:nth-child(1) a,
.calendar nav li:nth-child(2) a,
.gallery1 nav li:nth-child(3) a,
.aboutus nav li:nth-child(4) a,
.contact nav li:nth-child(5) a {
	
    background-color:#8E7072;
    color:white;
    border-radius:10px;
    padding:10px;
    
}

.container {
    position:fixed;
    background:white;
    width:100%;
    margin:0 auto;
   padding:1%;
    z-index:1;
    
}

img {
    max-width:100%;
}

.box1 img {
    width:100%;
}


.box1 {
    margin-top:150px;
    position:relative;
    clear:top;
    clear:bottom;
    
}

.bottom-right {
  position: absolute;
  bottom: 1%;
  left: 45%;
margin-right:3%;
color:white;
}

.bottom-right-inner {
  position: absolute;
  bottom:1%;
  right:10px;
    text-align:right;
margin-right:1%;
color:white;
}


.box1 img {
    position:relative;
    border-bottom:5px solid #585536;
     border-top:5px solid #585536;
}

.box2 {
    margin:50px;
    margin-bottom:0px;
    clear:top;
    
 
}


.giphy-div {
    width:100%;

    padding-bottom:35%;
    padding-left:65%;
    margin-right:0;
    

    position:relative;
    align-content:space-around;
}

.giphy-embed {
    height:125%;
    align-content:space-around;
}

.box3 {
    background:#525536;
    clear:both;
    clear:top;
    padding:25px;
    padding-bottom:50px;
    overflow:hidden;
    border-bottom:5px solid #834061;
    border-top:5px solid #834061;
    
}

.inner-half {
    width:47.7%;
    float:left;
    
}

.inner-half img {
    width:75%;
    border-radius:10px;
    margin-bottom:25px;
}


.inner-third {
    justify-content:center;
    display:inline-flex;
    flex-direction:row;
    align-content:space-between;
}

.inner-third a {
    text-decoration:none;
    color:black;
}

.inner-third div {
    width:30%;
    margin-right:3%;
   background-color:white;
    border-radius:10px;
    padding-top:2%;
    padding-bottom:3%;
}

.inner-third div:first-of-type {
    margin-left:3%;
}

.inner-third div:last-of-type {
    margin-right:3%;
}


.inner-third-testimonial {
    display:inline-flex;
    justify-content:center;
    flex-direction:row;
    align-content:space-between;
    text-align:center;
}


.inner-third-testimonial div {
    width:28%;
    margin-right:3%;
   background-color:none;
    padding-top:2%;
    padding-bottom:3%;
}

.inner-third-testimonial div:first-of-type {
    margin-left:3%;
}

.inner-third-testimonial div:last-of-type {
    margin-right:3%;
}



.inner-third-testimonial img {
    border:3px solid white;
    border-radius:10px;
}


.icon {
    display:inline-block;
    vertical-align:middle;
    margin-right:5px;
}


.center {
    display:block;
    margin-left:auto;
    margin-right:auto;
    border:3px white solid;
}

.inner-third .center {
    max-width:25%;
}

.box4 {
   
width:80%;
margin:auto;
    margin-top:5%;
    margin-bottom:5%;
}

.flexslider {
    width:100%;
}

.flex-caption {
    margin:2% auto;
    width:70%;
}



.slides img {
    border-radius:10px;
}



.box5 {
    background:#834061;
    overflow:hidden;
    padding:25px;
    border-bottom:5px solid #D95D41;
    border-top:5px solid #D95D41;
    text-align:center;
  
}



.box7 {
    background:#525536;
    overflow:hidden;
    padding:25px;
    padding-bottom:5%;
    border-bottom:5px solid #834061;
    border-top:5px solid #834061;
}

.contactpage {
    margin-top:10%;
}

.contactpage .contactus {
   margin-top:0px; 
}



.box8 {
    z-index:-5;
    clear:both;
    margin-top:25px;
    overflow:hidden;
}

.box8:first-of-type {
    margin-top:16%;
}

.box9 {
    margin-top:5%;
    width:100%;
    height:20px;
    background:#834061;
    border-bottom:5px solid #D95D41;
    border-top:5px solid #D95D41;
    clear:both;
}

main {
    margin:18% 5% 0 5%;
    max-width:1100px;
}

.mainimg {
    max-width:100%;
    border-radius:10px;
}

.responsiveCal {
 
position: relative; padding-bottom: 75%;
    overflow: hidden;
    align-content:center;
    
    
 
}
 
.responsiveCal iframe {
 
position: absolute; top:0; left: 0; width: 100%; height:100%;
    max-width:1100px;
 
}

.calendarbackground {
    max-width:80%;
    margin:0 auto;
}



.inner-half-left {
    margin:3% 0 10% 3%;
    width:45%;
    float:left;

}


.inner-half-right {
    margin:3% 3% 10% 0%;
    width:45%;
    float:right;

}

.galleryintro {
    margin-top:10%;
}

.pa-carousel-widget {
    border:1.5px solid #7f8454;
    padding:20px;
    margin-bottom:15px;
  
}


.jx-carousel-title {
    display:none;
}


footer {
    margin:2% auto;
    padding-bottom:100px;
    max-width:1100px;
    margin-left:25px;
    clear:both;
}

.footerlogo {
    float:left;
    max-width:8%;
    margin-left:20px;
}

footer ul {
    float:right;
    margin-top:35px;
}

footer li {

    list-style-type:none;
     text-decoration:none;
    display:inline-block;
    font-size:.9em;
    margin-right:20px;
}

footer li a {
    text-decoration:none;
}

/*typography*/

body {
    font-size:100%;
}

h1 {
    font-family:'Dancing Script',cursive;
    font-size:3em;
    color:#834061;
    margin-bottom:5%;
    text-align:right;
}



p, nav a {
    font-family:'Poppins',sans-serif;
    font-size:1em;
    font-weight:400;
}

h4 {
    font-family:'Poppins',sans-serif;
    font-size:2em;
    text-align:center;

}



.box8 p {
    
    margin-left:15px;
    margin-right:15px;
}

.calendarbackground h2 {
    color:#525536;
    margin:3%;
}



.aboutus h3 {
  
    font-family:'Dancing Script',cursive;
    font-size:3em;
      color:#D95D41;
    margin-bottom:5px;
    margin-left:15px;
    margin-top:5px;
}

.aboutus p {
    margin-right:15px;
}

.inner-half h2 {
    color:#834061;
    text-align:left;
}

.inner-half h4 {
    text-align:left;
    font-weight:500;
}

.gallery {
    color:#F2D5C4;
    background:#525536;
    padding:3%;
    
}

.gallerytitle {
    color:#834061;
    text-align:center;
    font-family:'Dancing Script',cursive;
    font-size:3.5em;
}


.inner-half p {
    text-align:left;
    margin-bottom:15px;
}


.inner-half-left p {
    text-align:center;
   
}

.inner-half-right p {
    text-align:center;
   
}


.inner-third h4, p {
    text-align:center;
    text-decoration:none;
    margin:0 5%
    
}

.inner-third h4 {
     font-family:'Dancing Script',cursive;
    font-size:2em;
    margin-bottom:8px;
}

.inner-third a {
    text-decoration:none;
}

.inner-third br {
    margin-bottom:10px;
}


.inner-third-testimonial p {
    color:white;
}


h4 {
    color:#D95D41;
    font-family:'Poppins',sans-serif;
    font-style:bold;
    font-size:1.3em;
    margin-bottom:2%;
    margin-top:2%;
   text-decoration:none;
    text-align:center;
}

.inner-third-testimonial h4 {
    text-align:center;
    margin-top:8px;
}

.box2 h4 {
    color:black;
    font-weight:100;
}

h4 a {
    text-decoration:none;
    color:#D95D41;
}



h3 {
    font-family:'Poppins',sans-serif;
    color:white;
    padding-top:10px;
    padding-bottom:10px;
    margin-left:15px;
}

.box8 h3 {
    margin-top:0;
    padding-top:0;
    padding-bottom:5px;
}

h2 {
    font-family:'Dancing Script',cursive;
    font-size:3em;
    text-align:center;
    margin-bottom:20px;
    color:#F2D5C4;
    
}


blockquote {
    text-align:center;
     font-family:'Dancing Script',cursive;
    font-size:4em;
    font-weight:800;
    margin:5%;
    color:#8E7072;
}



footer ul {
    
    font-size:.9em;
    font-family:'Poppins',sans-serif;
    
}

footer ul a {
    color:black;
}


p {
   margin-top:5px;
    text-align:center;
}



.box8 h3 {
    text-align:left;
}

.leftimage h3 {
    text-align:right;
}

.leftimage p {
    text-align:right;
    margin-left:50px;
    margin-right:0;
}

.nav-button { display: none; } /* hide the navigation button by default */

@media only screen and (max-width:1450px) {

    .box1 {
        margin-top:11%;
    }
    
.contactpage {
    margin-top:13%;
} 

.giphy-div {
    width:100%;

    padding-bottom:45%;
    }
    
@media only screen and (max-width:1150px) {

    nav {
        width:60%;
    }   
   

    .contactus {
        margin-top:10%;
    }
    
    .contactpage {
        margin-top:13%;
    } 
    
    .galleryintro {
    margin-top:15%;
}
    
       .gallerytitle {
    font-size:2.5em;
}
   
    .box1 {
        margin-top:13%;
    } 
    
    .giphy-div {
    width:100%;

    padding-bottom:55%;
    }
    
@media only screen and (max-width:950px) {

  .bottom-right {
  bottom: 1%;
 
}
    
       nav {
        width:65%;
    }
    
  
    .contactus {
        margin-top:25%;
    }
  
    .contactpage {margin-top:16%;}
  

  .galleryintro {
    margin-top:20%;
}  
   
    .gallerytitle {
    font-size:2em;
}
    
    .box1 {
        margin-top:15%;
    }
 
    .giphy-div {
    width:100%;

    padding-bottom:65%;
    }
    
@media only screen and (max-width:800px) {
    
    nav {
        width:70%;
    } 
    
    .bottom-right {
        font-size:2.25em;
        margin-right:3%;
        margin-bottom:3%;
    }
    
    .box1 {
        margin-top:18%;
        margin:0 auto;
    }
    
   
       .gallerytitle {
    font-size:2em;
}
    
    .inner-half {
        float:none;
        width:auto;
    }
    
    .inner-half h2 {
        text-align:center;
    }
    
    .inner-half h4  {
        text-align:center;
    }
    
    .giphy-div {
        padding-bottom:35%;
        padding-left:33%;
    }
 
    .inner-third {
    flex-wrap:wrap;
    align-content:center;
}

    .inner-third h2 {
        margin-bottom:25px;
    }
    
.inner-third div {
    width:100%;
    margin:0 auto;
    padding-top:2%;
    padding-bottom:3%;
    margin-bottom:5%;
}

    .inner-third div:first-of-type {
        margin:0 auto;
        margin-bottom:5%;
    }
    
    .inner-third div:last-of-type {
        margin:0 auto;
    }


.inner-third-testimonial {
   flex-wrap:wrap;
    align-content:center;
    text-align:center;
}


.inner-third-testimonial div {
    width:100%;
    margin:0 auto;
   background-color:none;
}

.inner-third-testimonial div:first-of-type {
    margin:0 auto;
}
    
    .inner-third-testimonial div:last-of-type {
        margin:0 auto;
    }
    
    .inner-third testimonial div:last-of-type {
        margin-left:0;
    }

  .aboutus h3 {
  
    text-align:center;
      max-width:80%;
      margin:0 auto;
}

.aboutus p {
    margin:0 auto;
    text-align:center;
    max-width:80%;
    margin-bottom:30px;
    
}  
    
    .aboutus {
        margin:0 auto;
    }
    
    .box1 {
        margin-top:18%;
    }

    .box 4 {
        margin:0 auto;
    }
    
.seniorportrait {
        max-width:85%;
    display:block;
    margin:0 auto;
    }
    
    blockquote {
        font-size:3em;
        margin:25px auto;
        padding-left:20px;
        padding-right:20px;
    }

.box7 {
    padding-bottom:10%;
    }
    
     footer {
    width:100%;
    margin:0 auto;
        text-align:center;
        margin-bottom:100px;
    
}
    .gallerytitle {
        margin-top:35px;
    }
    
  
    .contactpage {
        margin-top:20%;
    }
 
    main {
        margin:0 auto;
    }
    
    .footerlogo {
        float:none;
    max-width:10%;
        margin:0 auto;
}

    .albumdescriptor {
        max-width:80%;
        margin:0 auto;
    }
    
   
    
    .aboutus.box8 {
        margin:25px auto;
    }
    
    .box3 h2 {
        margin-bottom:25px;
    }
    
    .box5 h2 {
        margin-bottom:25px;
    }
    
    .box7 h2 {
        margin-bottom:25px
    }
    
    .home h2 {
        max-width:90%;
    }
    
    h3 {
        margin:0 auto;
    }
    
    

@media only screen and (max-width: 700px) {
    
   
    .logo {
        display:none;
    }
    
    
    .mobilelogo {
        display:inline-block;
        width:38%;
		position: absolute;
		top: 13px;
		left:10px;
		z-index: 999;
	}
    
    .mobilelogo p {
        text-decoration:none;
        position:absolute;
        top:0px;
        left:34px;
        text-align:left;
        color:white;
        z-index:1500;
        font-size:.8em;
        width:100%;
        overflow:hidden;
    }
    
    .mobilelogo hover a {
        display:none;
    }
    
    .phone hover a {
        display:none;
    }
    
    .fas {
        font-size:1.8em;
        color:white;
        display:block;
        position:absolute;
        top:10px;
        right:75px;
        z-index:999;
    }
    
    .bottom-right-inner {
        font-size:2em;
        margin-bottom:10px;
    
    }
    
    
    .container {
    
        margin-bottom:50px;
        margin-right:auto;
        margin-left:auto;
        
    }
    
    .home {
        margin:0 auto;
    }
    
    .wrapper {
        margin:0 auto;
    }
    
    .box1.box3.box4.box5.box6.box7 {
        margin-left:auto;
        margin-right:auto;
    }
    
     .box1 {
        margin-top:3%;
    }
    
   
    .box2 h1,h2,h4 {
        text-align:center;
        margin:0 auto;
    }
    
    .box2 h4 {
        max-width:85%;
        margin-top:25px;
    }
    
    .box2 {
        margin:50px auto;
    }
    
    .giphy-div {
        padding-bottom:45%;
        padding-left:32%;
    }
    
    .inner-half {
        float:none;
        width:auto;
        margin:0 auto;
    }
    
    .inner-half h4 {
        text-align:center;
    }
    
    .inner-half h2 {
        text-align:center;
    }
    
 

    
.box4 {
   
width:80%;
margin:5% auto 5% auto;
}
    
        
      .inner-half-left {
       width:100%;
       float:none;
       margin:0 auto;
          overflow:hidden;
}
  

.inner-half-right {
    width:100%;
    float:none;
    margin:0 auto;
    overflow:hidden;
}
    
.inner-half-left p {
    text-align:center;
    margin:0 auto;
    padding-bottom:8%;
    border-bottom:3px solid #834061;
    
}

.inner-half-right p {
    text-align:center;
    margin:0 auto;
    padding-bottom:8%;
   
}
    
 
    .calendarbackground {
    max-width:90%;
        
}

    .responsiveCal {
        margin-top:35px;
    }
    
    .galleryintro {
        margin-top:8%;
        
    }
    
    .gallerytitle {
        margin-bottom:0;
        font-size:2.5em;
    }
    
    .box8:first-of-type {
        margin-top:8%;
    }

 .bottom-right {
        font-size:1.75em;
    }
    
        .box3 h2 {
        margin-bottom:25px;
            
    }
    
    .box5 h2 {
        margin-bottom:25px;
        
    }
    
    .box7 h2 {
        margin-bottom:25px;
       
    }
    
.aboutus p, h3 {
        text-align:center;
        margin:0 auto;
    }
    
    .aboutus p {
        margin-bottom:20px;
    }
    
    .aboutus h3 {
        text-align:center;
    }
    
.albumdescriptor {
       margin:5% 15% 10% 15%;
    }
    
    
       .pa-carousel-widget {
    border:none;
           margin:0 auto;
           align-content:center;
    
}


    .contactus {
        margin-top:8%;
    }
   
    .contactpage {
        margin-top:5%;
    }
  
    
    footer {
    width:100%;
    margin:0 auto;
        text-align:center;
        margin-bottom:100px;
    
}
    
    .footerlogo {
    margin-top:5%;
        float:none;
    max-width:75%;
}

    
footer li {

    list-style-type:none;
     text-decoration:none;
    font-size:.9em;
    width:100%;
}

footer li a {
    text-decoration:none;
}
    

   
    
	/* Navigation Button
	-------------------------------------------------------- */

	.nav-button {
		display: block;
		position: absolute;
		top: 7px;
		right: 7px;
		width: 50px;
		height: 35px;
		background: url('../images/menu-icon-large.png'), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
		cursor: pointer;
		border: 0 none;
		border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
		border-radius:10px;
		z-index: 999;
		text-indent: -9999px;
	}
	.nav-button:hover {
		background-color: rgba(0,0,0,.1);
	}
	.nav-button.open {
		background: url('../images/close-icon-large.png'), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
	}

	/* Navigation Bar
	-------------------------------------------------------- */

	body { padding-top: 50px; }
    

	.primary-nav {
		width: 100%;
		float: none;
		background-color: #834061; /* change the menu color */
		background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
		display: block;
		height: 50px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,.6);
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 998;
		clear: both;
	}
	.primary-nav li {
		display: none;
		width: 100%;
		font-family:'open sans',sans-serif;
	}
	.primary-nav li a {
		display: block;
		width: 90%;
		padding: 10px 5%;
		font-size: 14px;
		font-weight: bold;
		text-shadow: -1px -1px 0 rgba(0,0,0,.15);
		color: white;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,.2);
		border-top: 1px solid rgba(255,255,255,.1);
	}
	.primary-nav li a:hover {
		background-color: rgba(0,0,0,.5);
		border-top-color: transparent;
	}
	.primary-nav > li:first-child {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	/* Toggle the navigation bar open  */

	.primary-nav.open {
		height: auto;
		padding-top: 50px;
	}
	.primary-nav.open li {
		display: block;
	}

	/* Submenus – optional .parent class indicates dropdowns */

	.primary-nav > li:hover > a {
		background: rgba(0,0,0,.5);
		border-bottom-color: transparent;
	}
	.primary-nav li.parent > a:after {
		content: "▼";
		color: rgba(255,255,255,.5);
		float: right;
	}
	.primary-nav li.parent > a:hover {
		background: rgba(0,0,0,.75);
	}
	.primary-nav li ul {
		display: none;
		background: rgba(0,0,0,.5);
		border-top: 0 none;
		padding: 0;
	}
	.primary-nav li ul a {
		border: 0 none;
		font-size: 12px;
		padding: 10px 5%;
		font-weight: normal;
	}
	.primary-nav li:hover ul {
		display: block;
		border-top: 0 none;
	}

} /* End Mobile Styles */