/*
 ____ _     ____  _  ____ _____ _  _____ _      ____ 
/   _Y \ /|/  __\/ \/ ___Y__ __Y \/  __// \  /|/  _ \
|  / | |_|||  \/|| ||    \ / \ | ||  \  | |\ ||| / \|
|  \_| | |||    /| |\___ | | | | ||  /_ | | \||| |-||
\____|_/ \|\_/\_\\_/\____/ \_/ \_/\____\\_/  \|\_/ \|

This page was made by Christie!
*/

#ascii {
    font-family: monospace;
    white-space: pre;
    text-align: center;
}

#wrapper {
    margn: 0 auto;
}

.center{
    text-align: center;
}

/*----------fonts-----------------------------------*/
@font-face{
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/PoppinsSemiBold.ttf");
}

@font-face{
    font-family: Asap;
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/Asap-VariableFont_wght.ttf");
}
/*-------------------end of fonts-------------------*/

/*-----------------links------------------*/
a:link{
    color: white;
    text-decoration: none;
}

a:visited{
    color: white;
    text-decoration: underline;
}

a:hover{
    color: #f7d64d;
    text-decoration: none;
}

a:active{
    color: light blue;
    text-decoration: underline;
}
/*-------------end of links---------------*/

/*--------------------------------------LAPTOP DISPLAY----------------------------------------*/
@media screen and (min-width: 1366px) and (max-width: 1919px){

header{
    height: 17vh;
    background-color: #234ba0;
    margin: 0 auto;
}

h1{
    font-family: "Poppins", sans-serif;
    text-align: center;
    font-size: 24pt;
}

h2{
    font-family: "Asap", sans-serif;
    font-size: 20pt;
    text-align: center;
}

p{
    font-family: gill sans, sans-serif;
    font-size: 14pt;
    font-style: normal;
    line-height: 3vh;
}

/*-------------nav------------------*/

nav ul {
    margin: 0 auto; 
    padding-left:0;
    list-style-type:none;
    text-align: center;
}

nav li {
    display:inline-block;
    float: left
}

nav li a { 
    display:inline-block;
    width: 100px;
    padding: 11vh 0 1vh 8vw; 
    font-family: 'Asap', sans-serif;
    font-size: 14pt;
    color: white;
}

#logo{
    height: 8vh;
    margin: 7vh 2vw 2vh 4vw;
    display: inline-block;
    float: left;
}

#logo:hover{
    transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
}
/*---------------end of nav---------------*/


/*----------home page---------------*/
.fotorama{
    height: 60vh;
    max-width: 100%;
    margin: 0 auto;
}

.see-menu{
    font-family: "Asap", sans-serif;
    text-align: center;
    color: white;
    border-radius: 50px;
    background-color: #234ba0;
    padding-top: 2vh;
    width: 12vw;
    height: 4vh;
    display: inline-block;
    transform: translate(363%, -225%);
    position: relative;
}

#portafilter{
    height: 45vh;
    float: left;
    display: inline-block;
    margin: 4vh 6vw 8vh 10vw;
}

#intro-heading{
    display: inline-block;
    float: left;
    margin: 4vh auto 0;
    width: 35vw;
    text-align: left;
}

#intro{
    display: inline-block;
    float: left;
    margin: 3.5vh auto 13vh;
    width: 35vw;
    line-height: 4vh;
}

#comm-heading{
    clear: both;
    display: block;
    text-align: center;
}

figure#comm-margin{
    margin-left: 5vw;
}

.comm-img{
    float: left;
    margin: 2vh 0.5vw 6vh;
    height: 40vh;
    display: inline-block;
}
/*----------end of home page---------------*/

/*----------menu page----------------------*/
h1#menu{
    margin: 5vh auto 3vh;
}

.col{
    display:inline-block; 
    float:left; 
    margin: 3vh 2vw; 
}

.prod{ 
    height:50vh;
}

.item-text{
    text-align: center;
}

/*----------end of menu page---------------*/


/*----------about page---------------------*/

#slideshow2{
    max-width: 100%;
    height: 80vh;
    margin: 0 auto;
}

figcaption{
    float: right;
    margin: 0 5vw 3vh;
    font-family: gill sans, sans-serif;
    font-size: 12pt;
    font-style: regular;
}

section#about-info{
    clear: both;
    margin: 2vh 5vw 15vh;
}

/*----------end of about page--------------*/


/*----------contact page-------------------*/
#contact-info{
    display: inline-block;
    float: left;
    margin-left: 10vw;
    width: 38vw;
}

#email-link a:link{
    color: black;
    text-decoration: none;
}
#email-link a:visited{
    color: black;
    text-decoration: underline;
}
#email-link a:hover{
    color: #f7d64d;
    text-decoration: none;
}
#email-link a:active{
    color: light blue;
    text-decoration: underline;
}

#contact-box{
    width: 27vw;
    margin: 5vh 2vw 0 56vw;
    padding: 2vh 1vw;
    border-radius: 10px;
    border: #234ba0 solid 1px;
}

.form-style{
    width:25vw; 
    border: #234ba0 solid 1px; 
    border-radius: 10px;
    padding: 1vh 1vw; 
    margin-top: 0.5vh;
    font-family: gill sans, sans-serif;
    font-size: 11pt;
    font-style: normal;
    text-align: left;
}

#type-here{
    height: 13vh;
}

#submit{
    font-family: gill sans, sans-serif;
    font-size: 11pt;
    font-style: normal;
    color:white; 
    text-align:center; 
    background-color:#234ba0;  
    width: 10vw;
    height: 5vh;
    border-radius: 50px;
    margin: 0 2vw 20vh 55.75vw;
    transition: width 1s;
    transform: translate(0%, -50%);
}

#submit:hover{
    width: 13vw;
}

/*----------end of contact page-----------*/


/*-------------------footer---------------*/
footer{
    clear: both; 
    background-color: #234ba0; 
    color: white; 
    text-align: center; 
    font-weight: 400; 
    padding-top: 2vh;
    margin: 0 auto;
} 
 
#social{
    margin: 0 auto;
    width: 7vw;
}

/*--------------end of footer------------*/

}



/*--------------------------------------TABLET DISPLAY----------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1365px){

header{
    height: 25vh;
    background-color: #234ba0;
    margin: 0 auto;
}

h1{
    font-family: "Poppins", sans-serif;
    text-align: center;
    font-size: 24pt;
}

h2{
    font-family: "Asap", sans-serif;
    font-size: 20pt;
    text-align: center;
}

p{
    font-family: gill sans, sans-serif;
    font-size: 14pt;
    font-style: normal;
    line-height: 6vh;
}

/*-------------nav------------------*/

nav ul {
    margin: 0 auto; 
    padding-left:0;
    list-style-type:none;
    text-align: center;
}

nav li {
    display:inline-block;
    float: left
}

nav li a { 
    display:inline-block;
    width: 100px;
    padding: 16vh 0 1vh 4vw; 
    font-family: 'Asap', sans-serif;
    font-size: 14pt;
    color: white;
}

#logo{
    height: 15vh;
    margin: 8vh 0 2vh 4vw;
    display: inline-block;
    float: left;
}

#logo:hover{
    transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
}
/*---------------end of nav---------------*/


/*----------home page---------------*/
.fotorama{
    height: 70vh;
    max-width: 100%;
    margin: 0 auto;
}

.see-menu{
    font-family: "Asap", sans-serif;
    text-align: center;
    color: white;
    border-radius: 50px;
    background-color: #234ba0;
    padding-top: 2vh;
    width: 14vw;
    height: 4.5vh;
    display: inline-block;
    transform: translate(300%, -225%);
    position: relative;
}

#portafilter{
    height: 65vh;
    float: left;
    display: inline-block;
    margin: 5vh 5vw 8vh 10vw;
}

#intro-heading{
    display: inline-block;
    float: left;
    margin: 4vh auto 0 1vh;
    width: 35vw;
    text-align: left;
}

#intro{
    display: inline-block;
    float: left;
    margin: 3.5vh auto 13vh 1vw;
    width: 35vw;
    line-height: 4vh;
}

#comm-heading{
    clear: both;
    display: block;
    text-align: center;
}

figure#comm-margin{
    margin-left: 7.5vw;
}

.comm-img{
    float: left;
    margin: 2vh 0.5vw 6vh;
    height: 40vh;
    display: inline-block;
}
/*----------end of home page---------------*/

/*----------menu page----------------------*/
h1#menu{
    margin: 5vh auto 3vh;
}

.prod-margin{
    margin-left: 3vw;
}

.col{
    display:inline-block; 
    float:left; 
    margin: 3vh 2vw; 
}

.prod{ 
    height:50vh;
}

.item-text{
    text-align: center;
}

/*----------end of menu page---------------*/


/*----------about page---------------------*/

#slideshow2{
    max-width: 100%;
    height: 70vh;
    margin: 0 2.5vw 1vh;
}

figcaption{
    float: right;
    margin: 0 6.5vw 3vh;
    font-family: gill sans, sans-serif;
    font-size: 12pt;
    font-style: regular;
}

section#about-info{
    clear: both;
    margin: 2vh 5vw 15vh;
}

/*----------end of about page--------------*/


/*----------contact page-------------------*/
#contact-info{
    display: inline-block;
    float: left;
    margin-left: 10vw;
    width: 38vw;
    line-height: 1vh;
}

#email-link a:link{
    color: black;
    text-decoration: none;
}
#email-link a:visited{
    color: black;
    text-decoration: underline;
}
#email-link a:hover{
    color: #f7d64d;
    text-decoration: none;
}
#email-link a:active{
    color: light blue;
    text-decoration: underline;
}

#contact-box{
    width: 30vw;
    margin: 5vh 2vw 0 7vw;
    padding: 2vh 1vw;
    border-radius: 10px;
    border: #234ba0 solid 1px;
    float: left;
    display: inline-block;
}

.form-style{
    width:28vw; 
    border: #234ba0 solid 1px; 
    border-radius: 10px;
    padding: 1.5vh 1vw; 
    margin-top: 0.5vh;
    font-family: gill sans, sans-serif;
    font-size: 11pt;
    font-style: normal;
    text-align: left;
}

#type-here{
    height: 15vh;
}

#submit{
    font-family: gill sans, sans-serif;
    font-size: 11pt;
    font-style: normal;
    color:white; 
    text-align:center; 
    background-color:#234ba0;  
    width: 10vw;
    height: 5vh;
    border-radius: 50px;
    margin: 0 2vw 20vh 55.75vw;
    transition: width 1s;
    transform: translate(-10%, -500%);
}

#submit:hover{
    width: 13vw;
}

/*----------end of contact page-----------*/


/*-------------------footer---------------*/
footer{
    clear: both; 
    background-color: #234ba0; 
    color: white; 
    text-align: center; 
    font-weight: 400; 
    line-height: 1vh;
    padding-top: 2vh;
    margin: 0 auto;
} 
 
#social{
    margin: 0 auto;
    width: 7vw;
}

/*--------------end of footer------------*/

}