/* CSS Reset */ 

body, header, nav, main, footer, img, h1, h3, ul, aside, figure, figcaption, video { 

    margin: 0; 
    padding: 0; 
    border: 0; 

} 

 

/* Style rules for body and images */ 

body { 

    background-color: #f6eee4; 

} 

 

img, video { 

    max-width: 100%; 
    display: block; 

} 

 

/* Style rules for mobile viewport */ 

 

/* Style rule show mobile class and hide tab-desk class */ 

.mobile, .mobile-tablet { 

    display: block; 

} 

 

.tab-desk, .desktop, #nav-links { 

    display: none; 

} 

/* Style rules for header area */ 

.mobile h1, .mobile h3 { 

    padding: 2%; 
    text-align: center; 

} 

.mobile h1 { 

    font-family: 'Emblema One', cursive; 
    margin: 2% 0 0 3%; 

} 

 

.mobile h3 { 

    font-family: 'Lora', serif; 
} 

 

/* Style rules for navigation area */ 

nav { 

    background-color: #2a1f14; 

} 

 

.mobile-nav a { 

    color: #fff; 
    text-align: center;   
    font-size: 2em; 
    text-decoration: none; 
    padding: 3%; 
	display: block; 

} 

 

.mobile-nav a.nav-icon { 

    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
	color: #f6eee4; 
    padding: 2%; } 

 

.nav-icon div { 

    height: 40px; 
    width: 40px; 
    color: #2a1f14; 

} 

 

/* Style rules for main content */ 

main { 

    padding: 2%; 
    font-family: 'Lora', serif; 

} 

 

main p { 

    font-size: 1.25em; 

} 

 

main h3 { 

    padding-top: 2%; 

} 

 

main ul { 

    list-style-type: square; 

} 

 

.link { 

    color: #4d3319; 
    text-decoration: none; 
    font-weight: bold; 
    font-style: italic; 

}
.action { 

    font-size: 1.75em; 
    font-weight: bold; 
    text-align: center; 

} 

 

.round { 

    border-radius: 6px; 

} 

 

aside { 

    text-align: center; 
    font-size: 1.5em; 
    font-weight: bold; 
    text-shadow: 4px 4px 10px #c5a687; 

} 

 

figure { 

    border: 4px solid #2a1f14; 
    box-shadow: 6px 6px 10px #c5a687; 
    max-width: 400px; 
    margin: 2% auto; 

} 

 

figcaption { 

    padding: 2%; 
    border-top: 4px solid #2a1f14; 

} 

 

#info ul { 

    margin-left: 10%; 

} 

#contact, #form h2 { 

    text-align: center; 

} 

 

.tel-link { 

    background-color: #2a1f14; 
    padding: 2%; 
    width: 80%; 
    margin: 0 auto; 

} 

 

.tel-link a { 

    color: #f6eee4; 
    text-decoration: none; 
    font-weight: bold; 

} 

 

#questions p { 

    cursor: pointer; 

} 

 

#answer { 

	text-align: center; 
    font-weight: bold; 
    width: 80%; 
    margin: 0 auto; 

} 

 

#answer h2 { 

    display: none; 

} 

 

/* Style rules for form elements */ 

fieldset, input, textarea  {  
  margin-bottom: 2%; 

} 

 

fieldset legend { 

    font-weight: bold; 
    font-size: 1.25em; 

} 

 

label { 

    display: block; 
    padding-top: 2%; 

} 

 

form #submit { 

    margin: 0 auto; 
    display: block; 
    padding: 2%; 
    background-color: #78593a; 
    color: #f6eee4; 
    font-size: 1.25em; 
    border-radius: 10px; 

} 

 

/* Style rules for footer content */ 

footer { 

    text-align: center; 
    font-size: 0.85em; 
    background-color: #2a1f14; 
    color: #f6eee4; 
    padding: 1% 0; 

} 

 

footer a { 

    color: #f6eee4;     
	text-decoration: none; 

} 

 

/* Media Query for Tablet Viewport */ 

@media screen and (min-width: 620px), print { 

  

/* Tablet Viewport: Show tab-desk class, hide mobile class */ 

.tab-desk { 

    display: block; 

    } 

 

.mobile, .mobile-nav { 

    display: none; 

    } 

     

/* Tablet Viewport: Style rules for nav area */ 

nav ul { 

    list-style-type: none; 

    text-align: center; 

    } 

     

nav li { 

	border-top: none; 
	display: inline-block; 
    font-size: 1.25em; 
    font-family: Geneva, Arial, sans-serif; 
    font-weight: bold; 

    } 

     

nav li a { 

	padding: 0.5em; 
    display: block; 
    color: #f6eee4; 
    text-decoration: none; 
 } 

     

.grid { 

    display: grid; 
    grid-template-columns: auto auto; 
    grid-gap: 10px; 

    } 

     

aside { 

    grid-column: 1 / span 2; 

    } 

     

/* Tablet Viewport: Style rule for form element */ 

form { 

    width: 70%; 
    margin: 0 auto; 

    } 

     

} 

 
/* Media Query for Desktop Viewport */ 

@media screen and (min-width: 1000px), print {     

/* Desktop Viewport: Show desktop class, hide mobile-tablet class */ 

.desktop { 

    display: block; 

    } 


.mobile-tablet { 

    display: none; 

    } 

     

/* Desktop Viewport: Style rules for nav area */ 
nav li {  
	font-size: 1.5em; 

    } 


nav li a { 

    padding: 0.5em 1.5em; 

    } 

     

nav li a:hover { 

    color: #2a1f14; 
    background-color: #f6eee4; 
    opacity: 0.5; 

    } 

     

/* Desktop Viewport: Style rules for main content */ 

#info ul { 

    margin-left: 5%; 

    } 

     

.grid { 

    grid-template-columns: auto auto auto; 
    grid-gap: 30px; 

    } 



aside { 

    grid-column: 1 / span 3; 
    font-size: 2em; 

    } 

     

/* Style rules for table */ 

table { 

    border: 1px solid #2a1f14; 
    border-collapse: collapse; 
    margin: 0 auto; 

    } 
 caption { 

    font-size: 1.5em; 
    font-weight: bold; 
    padding: 1%; 

    } 

 

th, td { 

    border: 1px solid #2a1f14; 
    padding: 1%; 

    } 

 

th { 

    background-color: #2a1f14; 
    color: #fff; 
    font-size: 1.15em; 

    } 

 

tr:nth-child(odd) { 

    background-color: #deccba; 

    } 

     
/* Desktop Viewport: Style rules for form elements */ 

form { 

    width: auto; 

    } 

     

.form-grid { 

    display: grid; 
    grid-template-columns: auto auto; 
	grid-gap: 20px;  

    } 

     

.btn { 

    grid-column: 1 / span 2; 

    } 

     

} 

 

/* Media Query for Large Desktop Viewports */ 

@media screen and (min-width: 1921px), print { 

     

    body { 

    background: linear-gradient(#f6eee4, #78593a); 

    } 

     

    #wrapper { 

    width: 1920px; 
	margin: 0 auto; 

    } 

         

main { 

    background-color: #f6eee4; 

    } 

     

.grid { 

    grid-template-columns: auto auto auto auto; 

    } 

     

aside { 

    grid-column: 1 / span 4; 
    font-size: 3em; 

    } 



} 

 

/* Media Query for Print */ 

@media print { 

     

    body { 

        background-color: #fff; 

        color: #000; 

    } 

     

}