/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 8, 2022 */



@font-face {
    font-family: 'klinic_slabbold';
    src: url('klinicslabbold-webfont.woff2') format('woff2'),
         url('klinicslabbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'klinic_slabbook';
    src: url('klinicslabbook-webfont.woff2') format('woff2'),
         url('klinicslabbook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'klinic_slabbook_italic';
    src: url('klinicslabbookit-webfont.woff2') format('woff2'),
         url('klinicslabbookit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'klinic_slablight';
    src: url('klinicslablight-webfont.woff2') format('woff2'),
         url('klinicslablight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'klinic_slablight_italic';
    src: url('klinicslablightit-webfont.woff2') format('woff2'),
         url('klinicslablightit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'klinic_slabmedium';
    src: url('klinicslabmedium-webfont.woff2') format('woff2'),
         url('klinicslabmedium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'klinic_slabmedium_italic';
    src: url('klinicslabmediumit-webfont.woff2') format('woff2'),
         url('klinicslabmediumit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 8, 2022 */



@font-face {
    font-family: 'goudy_old_styleitalic';
    src: url('goi_____-webfont.woff2') format('woff2'),
         url('goi_____-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'goudy_old_styleregular';
    src: url('goudos-webfont.woff2') format('woff2'),
         url('goudos-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'goudy_old_stylebold';
    src: url('goudosb-webfont.woff2') format('woff2'),
         url('goudosb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'goudy_old_styleitalic';
    src: url('goudosi-webfont.woff2') format('woff2'),
         url('goudosi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'goudy_old_stylebold';
    src: url('goudy_old_style_bold-webfont.woff2') format('woff2'),
         url('goudy_old_style_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'goudy_old_styleitalic';
    src: url('goudy_old_style_italic-webfont.woff2') format('woff2'),
         url('goudy_old_style_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a:link {
    color: #fff;
    }
      
    a:visited {
    color: #fff;
    }
      
    a:hover {
    color: #5e1211;
    }

    a:active {
    color: #5e1211;
    }

nav {
    color: #5e1211; /*this is Wine for the text from brand style guide*/
    margin: 0px;
    background-color: #f6f3ef; /*this is a 15% Cannoli color to match background*/
    font-family: 'klinic_slabbold', sans-serif; 

                
     }

/* Navigation */
ul {
    list-style-type: none; /*this removes the bullets from the list */
    margin: 10px;
    padding:20px;
    font-family:'klinic_slabbold', sans-serif;
}
li {
    display: inline-block; /*this makes the links horizontal */
}

nav li a {
    color: #fff; /*this is the font color and it is white*/
    padding:10px; /*this is the padding around the text which creates that box*/
    margin:5px;
    background-color: #5e1211; /*this is the background color in the box around the text*/
    max-width: 700px;
    width: 100%;
    align-items:center;
    justify-content: space-evenly;
    font-family: 'klinic_slabbold', sans-serif;

           
}

h1{
        color:#0B9446; 
        font-family: 'klinic_slabbold', sans-serif;
        font-size: 40px;
        padding: 0px;
        margin:25px;
    
    }
h2{
        color:#CF1C44; 
        font-family: 'klinic_slabbold', sans-serif; 
        font-size: 35px;
        font-weight: bold;
        padding: 0px;
        margin:25px;
    
    }
h3{
        color:#CF1C44; 
        font-family: 'klinic_slabbold', sans-serif; 
        font-size: 30px;
        font-weight: bold;
        padding: 0px;
        margin:25px;
        
    }
    
h4{
        color:#5e1211; 
        font-family: 'klinic_slabbold', sans-serif; 
        font-size: 20px;
        font-weight: bold;
        padding: 0px;
        margin:25px;
        
    }
        
/*Tried to do youtube tutorial to center paragraph and not sure it works https://youtu.be/QdITQ4upjME */
p{
    max-width: 750px;
    width: 100%;
    align-items:center;
    /*justify-content: center;*/
    font-family: 'klinic_slabmedium', sans-serif; 
    font-size:20px;
    padding: 0px;
    margin:25px;

} 

blockquote{
    color:#5e1211; 
    font-family: 'klinic_slabmedium', sans-serif; 
    font-size: 20px;
    font-weight: italic;
    padding: 25px;

    
}

img{
    padding: 10px;

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

body {
    font-family: 'klinic_slabmedium', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color:#5e1211;
    background: #fff;
}

.container {
    max-width: 960px;
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;

    
}

.item {
    /*background: #D8C6B8;*/
    color:#5e1211;
    font-size: 20px;
    padding: 0px;
    border: #fff 3px solid;
    /*align:left;*/

    /*position:static;*/

}

.item:nth-of-type(1) {
    
    color: #5e1211; /*this is Wine for the text from brand style guide*/
    margin: 10px;
    font-family: 'klinic_slabbold', sans-serif; 
    
    /*background-color: #5e1211; /* f6f3ef this is a 15% Cannoli color to match background*/;
    grid-column: 1/5;
}

.item:nth-of-type(2) {
    background: #fff;
    grid-column: 1/3;
}

.item:nth-of-type(3) {
    background: #fff;
    
}

.item:nth-of-type(4) {
    background: #fff;
    grid-row: 2/4;
}

.item:nth-of-type(5) {
    background: #fff;
    grid-row: 2/4;
}

.item:nth-of-type(6) {
    background: #fff;
    grid-row: 2/4;
}

/* This is from Garnatti YouTube video Mod 6. Doesn't seem to work :( */
.item:nth-of-type(7) {
    background: #fff;
    grid-column: 1/4;
    /*max-width: 700px;
    width: 100%;
    align-items:center;
    justify-content: center;

    position:absolute;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;*/
}

.item:nth-of-type(8) {
    background: #fff;
    grid-column: 1/4;
}

.item:nth-of-type(9) {
    background-color: #CF1C44; /*Currently, Marinara Red. this was a 15% Cannoli color #f6f3ef to match background*/
    grid-column: 1/4;
    margin:10px;
    padding-right: 10px;
}

/*#slider {
    /*position: relative;
    width: auto;
    height: auto;
  
    overflow: hidden;
    /*box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  }*/

/* CSS style to put div side by side. Doesn't seem to be working 4/9 
    
        .container {
            width:300px;
            height:300px;
            
            padding-top:20px;
            padding-left:15px;
            padding-right:15px;
        }
        #st-box {
            float:left;
            width:300px;
            height:300px;
            background-color:white;
            border:solid black;
        }
        #nd-box {
            float:left;
            width:300px;
            height:300px;
            background-color:white; 
            border:solid black;
            margin-left:20px;
        }
        #rd-box {
            float:right;
            width:300px;
            height:300px;
            background-color:white;
            border:solid black;
        }
        */