/*
Theme Name: Three Lakes Dog Co.
Theme URI: https://www.threelakesdogco.com/
Description: This is the custom WordPress theme for Three Lakes Dog Company
Version: 1.0
Author: Kyle Kite
Author URI: http://kylekite.com
*/



/*RESET*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}


/*GLOBAL*/


body{
	background: #299999;
	color: #f5f5f0;
	font-family: Georgia, serif;
	font-size: 18px;}
	
body {
    
    background: #08CDCD;
    background: radial-gradient(circle, rgba(8, 205, 205, 1) 0%, rgba(6, 179, 179, 1) 64%, rgba(0, 149, 149, 1) 100%);
    background-attachment: fixed;
}

a {
	color: #f5f5f0;
	text-decoration: none;
	}

strong, b {font-weight: bold;}
em, i {font-style: italic;}
.small {font-size: .65em;}

/*

   HEADER

*/

header h1 {
	width: 150px;
    height: 237px;
    background: #fff;
    background-image: url("i/logo-three-lakes-main-border.jpg");
    background-size: 150px;
    position: relative;
	left: 8.5%;
    text-indent: -9999px;
}
		
	header h1 a {
	    width: 150px;
        height: 237px;
        display: block;
	}

header nav {
		position: absolute;
    top: 0;
    right: 0;
		font-family: Oswald, sans-serif;
		text-transform: uppercase;
		font-size: 1.25em;
		padding: 0 30px 0 0;}

header nav a:hover li{
	background: #009090;
	border-radius: 0px 0px 4px 4px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.6);
}

	header nav li{
		float: left;
		padding: 40px 15px;}
		

header nav .fb li{

    padding: 36px 15px 37px;
}

header nav .fb img{

    width: 15px;
}

header nav .insta li{

 padding: 38px 15px 37px;
}

header nav .insta img{

    width: 27px;
}

#menu-open img {
    width: 28px;
}


#menu-open li {

padding: 40px 15px 40px
}

.home #menu-open {
    display: none;
}

/*

   MENU MOBILE

*/

#menu-mobile {background-color: rgba(0, 144, 144, .9); padding: 0 1em 1em; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; transition: .5s; overflow: auto; text-align: center; font-size: 2em; z-index: 9999;}

    .menu-active #menu-mobile {opacity: 1; visibility: visible;}

    #menu-mobile ul {
        margin: 100px 0 0;
    }
    
    #menu-mobile li {float: none; display: block; border-bottom: 1px #077 solid; padding: 0.75em 0;}
    
        #menu-mobile a:last-of-type li {
            border: none;
        }
    
        #menu-mobile a:hover li{
	        background: rgba(0, 121, 121, .9);
	        border-radius: 0;
	        box-shadow: none;
}
    
    #menu-close {
        position: fixed;
        top: 25px;
        right: 25px;
    }
		
		
		
		
/*

   WRAPPER

*/
		
.wrapper {
	width: 720px;
	max-width: 85%;
	margin: -60px auto 100px;
}

    .home .wrapper {
	    width: 900px;
	    margin: -100px auto 45px;}
	
	.wrapper nav {
		text-align: center;	
}

.wrapper > a {
    
    width: 214px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}


.wrapper .logo {
    
    max-width: 200px;
    border-radius: 50%;
    border: 7px solid #009090;
    display: block;
    margin: 0 auto;
}

.wrapper article h2 {
    font-size: 3.5em;
    font-family: Oswald, sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin: .5em 0 0.5em;
    
}

.wrapper article nav ul {
    background: #009090;
    font-family: Oswald, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em;
    padding: 0.5em 0;
    margin: 0 0 1em;
}

    .wrapper article nav ul li {
        display: inline;
        padding: 0.25em 0;

    }
    
    .wrapper article nav ul li::after {
        content: " / ";
    }
    
        .wrapper article nav ul li:last-of-type::after {
        content: "";
        }
        
        .wrapper article nav ul li a {
        padding: 0.25em 0;
        }
    
            .wrapper article nav ul:hover,
            .wrapper article nav ul:hover a {
            color: #9cc;
            }
    
    
            .wrapper article nav ul a:hover {
            color: #f5f5f0;
            }
    
 
    
.wrapper article .content {
    
    background: #fff;
    color: #2a2a2a;
    padding: 25px 80px 50px;
}


/*

   TYPOGRAPHY

*/

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    font-weight: bold; line-height: 1em; margin: 1.25em 0;}


.content h1, .content h2, .content h3 {
    
    font-family: Georgia, serif; 
    font-size: 2em;
    text-align: center;
    width: 85%;
    margin-right: auto;
    margin-left: auto;
}

.content h3::after {
	content: "";
    display: block;
    border-top: 12px #009090 solid;
    width: 35%;
    margin: 1em auto;
    height: 0;
}

h4 {font-size: 1.45em;}

.content p {line-height: 1.8em; margin: 2.25em 0;}

.content a {
    color: #099;
}

    .content a:hover {
        background: #f0f0f0;
}

.content blockquote {
    padding: 0 2em;
    color: #808080;
}

    .content blockquote p {
    line-height: 1.65em;
}


.content img {height: auto; width: 100%; margin: 0 0 2.5em; display: block; border: 3px solid #009090;}

.content .alignleft img, .content .alignright img {
    margin-bottom: 0;
}

.content .wp-block-image figure.aligncenter {
    margin: 0 auto 2.5em;
}

.content .wp-block-image img {
    margin-bottom: 0;
}

.content .wp-block-buttons {
    margin: 2em auto;
    justify-content: center;
}

.content .wp-block-button__link {
    background: #009090;
    padding: .85em 1.4em;
    color: #fff;
    border-bottom: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
}

    .content .wp-block-button__link:hover {
        background: #00a0a0;
}

.content ol, .content ul {
    margin: 0 0 2.25em 2.25em
}

    .content ul {
        list-style: disc outside;
    }
    
    .content ol {
        list-style: auto outside
    }
    
    .content li {
        line-height: 1.6em;
        margin: 0 0 0.6em;
    }
    
    .content ol ol, .content ul ul {
        margin-top: .6em;
        margin-bottom: 0
}

.content .wp-block-separator {

    border: none;
    width: 29.75%;
    border-top: 12px #009090 solid;
    margin: 3em auto;
}

.content .wp-block-video {margin: 1.5em auto;}


/* FLUENT FORMS */

.ff-default .ff-el-form-control {
    border: 3px #009090 solid !important;
    border-radius: 0 !important;
    font-size: 1.2em;
    font-family: Georgia, sans-serif !important;
}

    .ff-default .ff-el-form-control:focus {
        border-color: #00d0d0 !important;
    }

.ff-default .ff-el-input--label label {
    margin-bottom: 0.5em !important;
}

button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style {
    background-color: #009090;
    border-radius: 9999px;
    display: block;
    margin: 1em auto;
    letter-spacing: 1px;
    font-family: Georgia, sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
}



/* FACEBOOK REVIEW PLUGIN */

.ti-widget.ti-face {
    margin-top: 1.35em !important;
}

.ti-widget.ti-face .ti-col-1 .ti-review-item {
    flex: 0 0 0 !important;
}






.home .wrapper nav h2 {
	font-size: 2.25em;
	font-style: italic;
	margin: 1em 0;
}

.home .wrapper nav ul{
			display: flex;		
}

.home .wrapper nav a {
	display: flex;
}

.home .wrapper nav a:hover {
	background: #009090;
	border-radius: 5px;
	box-shadow: 0px 1px 6px rgba(0,0,0,0.75);
}

.home .wrapper nav li {
		
		display: flex;
		flex-direction: column;
		padding: 30px 35px;
		font-family: Oswald;
		text-transform: uppercase;
		
		
		}

.home .wrapper nav li img{
		max-width: 100%;
		border-radius: 50%;
		border: 7px solid #009090;
		box-sizing: border-box;
}

.home .wrapper nav li p {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-grow: 1;
	font-size: 2em;
	margin: .85em 0 0;
}


footer {
	background: #009090;
	padding: 60px 0;}

	footer nav {
		width: 980px;
		max-width: 85%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;}
		
    footer a:hover {
        opacity: .85;
    }

footer h2 {
	font-size: 2.35em;
	text-align: center;
	font-style: italic;
	width: 100%;
	margin: 0 0 1.85em 0;
}

footer nav div {
	margin: 0 80px 0 0;
}

footer nav div:last-of-type {
	margin: 0;
}

footer nav h3 {
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	margin: 0 0 0.75em 0;
}

footer nav p {
	line-height: 1.8em;
	white-space: nowrap;
	margin: 0 0 1.6em;
}

footer nav div img,
footer nav div iframe {
	max-width: 100%;
}
footer .social {
	text-align: center;
	margin: 70px 0 15px;
}

    footer .social .fb {
        width: 23px;
    }

    footer .social .insta {
        width: 43px;
        position: relative;
        top: 2px;
    }

footer .social a:first-of-type {
	margin: 0 35px 0 0;
}

/*

    MEDIA QUERIES
    
*/

@media (max-width: 1099px) {
    
    header h1 {
	width: 100px;
    height: 158px;
    background-image: url("i/logo-three-lakes-main-border.jpg");
    background-size: 100px;
    position: relative;
	left: 8.5%;
}

    .home .wrapper	{margin: -60px auto 100px;}

    
    footer nav div {margin: 0 1.5em 0 0;}
}


@media (max-width: 959px) {
   
		
	header h1 a {
	    width: 100px;
        height: 158px;
        display: block;
	}
	
	.home .wrapper {
    margin: 20px auto 45px;}
    
	.home .wrapper nav h2 {
	    font-size: 1.5em;
	}
	
	
	
	   
	
	   
	    
	    .home .wrapper nav li p {
	        font-size: 1.5em;
	    }
    
    footer {text-align: center; padding: 2em 0 2em;}
    
    footer h2 {font-size: 1.5em;}
    
    footer nav {display: block;}
    
    footer nav div {margin: 0 0 1em;}
    
}

@media (max-width: 799px) {
    
    body {font-size: 16px;}
    
    .home .wrapper nav ul {
	    flex-direction: column;
	}
	
	.home .wrapper nav ul a {
	    display: block;
	}
	
	 .home .wrapper nav li {
	        display: block;
	        padding: 20px 0 30px;
	    }
	
	 .home .wrapper nav li img {
	        max-height: 150px;
	    }
    
    
    header nav {padding-right: 10px;}
    
        header nav #menu-open li {padding-top: 25px;}
        
    header nav a {display: none;}
    
        header nav a:last-of-type {display: inline;}
        
        header nav#menu-mobile a {display: block;}
        
        .home #menu-open {display: block;
}
    
    .wrapper {margin-bottom: 3em;}
    
    .wrapper .logo {max-width: 125px;}
    
    .wrapper article h2 {font-size: 2em;}
    
    .wrapper article nav ul {font-size: 1.2em;}
    
    .wrapper article .content {padding: 1em 3em 3em; margin: 0 0 1.5em;}
        
    #menu-close img {
        width: 30px;
    }
}
    
@media (max-width: 599px) {
    
    header h1 {
	width: 75px;
    height: 119px;
    background-image: url("i/logo-three-lakes-main-border.jpg");
    background-size: 75px;
    }

    
    #menu-mobile {font-size: 1.2em;}
    
    .wrapper {max-width: 90%; margin-top: 20px;}

    .wrapper article nav ul {font-size: 1em; margin: 0; padding: 0;}
    
    .wrapper article nav ul li {display: block; padding: 0; border-bottom: 1px #077 solid;}
    
        .wrapper article nav ul li:hover {background: #077;}
        
            .wrapper article nav ul li::after {content: "";}
    
    .wrapper article nav ul li a {display: block; padding: .85em;}


    .wrapper article .content {padding: 0.5em 2em 1.5em;}

    .content h1, .content h2, .content h3 {
    
    font-size: 1.6em;
    text-align: center;
    width: 100%;}
    
    h4 {font-size: 1.25em;}
    
    .content p {margin: 1.5em 0;}
    
    .content ol, .content ul {
    margin: 0 0 1.5em 1.25em
}

    .content blockquote {
    padding: 0 1em;}
    
    .content img, .content .alignleft img, .content .alignright img  {height: auto; margin: 0; display: block; border: 3px solid #009090; box-sizing: border-box;}

.content .wp-block-image .aligncenter,
.content .wp-block-image .alignleft,
.content .wp-block-image .alignright {
    margin: 0 auto 1.5em; float: none;}
}