@font-face {
    font-family: m;
    src: url("font/Montserrat-Medium.ttf") format("truetype");
}
@font-face {
    font-family: msb;
    src: url("font/MYRIADPRO-SEMIBOLD.OTF") format("opentype");
}
@font-face
{
    font-family: r;
    src: url("font/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
    font-family: eb;
    src: url("font/Montserrat-ExtraBold.ttf");
}
@font-face {
    font-family: sb;
    src: url("font/Montserrat-SemiBold.ttf");
}
html,body{
    font-family: m;
    color: white;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.navbar-brand img{
    height:38px; 
    width:263px;
}
#bar{
    background-color: #35b67a;
    height: 28px;
}
#links{
    float: right;
    padding-right: 5%;
    justify-content: space-around;
}
#links a:hover{
    opacity: 0.6;
} 
.navbar .navbar-toggler[aria-expanded="true"] {
    color: #35b67a!important;
}
.navbar .navbar-toggler:focus{
    color: #35b67a;
}
#btn{ 
  	font-weight: 600;
    padding: 1rem 2rem;
    text-decoration: none;
    color: #61cf9c;
    cursor: pointer;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
}
#btn:hover{
    color: rgb(3, 158, 3);
}
#home{
    background-color: #35b67a;
}
#home video{
    border: 3px solid white;
    float: right;
    width: fit-content;
}
#pictxt{
    display: grid;  
    justify-content: center;
    align-items: center;
    position: relative;  
}
#hdg{
    color: white;
    top: 75%;   
    position: absolute;
    padding-left: 5%;
}
#hdg p{
    font-size: 22px;
}
#vidbtn{
    display: grid;
    justify-content: center;
    align-items: center;
}
#ggq, #redm{
    --b: 3px;   
  --s: .45em; 
  --color: white;
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: auto;
}
#ggq:hover, #redm:hover{
    color: white;  
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}
#ggq a, #redm a{
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    color: white;
}
#logos{
    background-color: white;
    display: flex;
    justify-content: left;
    height: 100px;
}
#logos img{
    margin: auto;
}
#main1{
    color: white;
    background-color: #35b67a;
    padding: 3%;
}
#typtxt{
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
}
#typtxt h3{
    font-size: 35px;
    font-family: eb;
    font-weight: 900;
}
#typtxt p{
    line-height: 150%;
    font-size: 19px;
    font-weight: 500;
    margin: 5%;
}
#voices{
    display: grid;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
}
#voices h1{
    font-weight: 700;
    font-size: 28px;   
}
#ado{
    width: 100%;
}
#main2{
    text-align: center;
    justify-content: space-evenly;
    margin: auto;
    color: #35b67a;
    background-color: white;
    font-size: 16px;
    font-weight: 900;
    position: relative;
}
.mySlides{
    height: 295px;
    padding: 17vh;
}
.mySlides p{
    display: inline-flex;
    padding: 1%;
    margin: 0% 3% 0% 3%;
}
.prev, .next {
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    width: auto;
    top: 42%;
    color: darkgreen;
    font-size: 25px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.prev{
    margin-left: -96vw;
}
.next {
    margin-left: 96vw;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    font-size: 32px;
    font-weight: 900;
}
#main3{
    text-align: center;
    color: white;
    background-color: #35b67a;
    margin: auto; 
    padding: 2%;
}
#main3 h2{
    font-size: 25px;
    font-weight: 900;
    font-family: eb;
}
#main3 p{
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    line-height: 200%;
}
#cus{
    color: #35b67a;
    background-color: white;
    padding: 5% 0% 5% 0%;
}
#cont{
    text-align: justify;
    display: grid;  
    justify-content: center;
    align-items: center;
    margin: auto;
}
#cont p{
    font-size: 19px;
    line-height: 150%;
    word-spacing: 5px;
    font-family: r;
}
#cont a{
    text-decoration: none;
    color: #35b67a;
    font-size: 22px;
    font-weight: 600;
}
#cont a:hover{
    opacity: 0.6;
}
#form{
    display: grid;  
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 8px solid #35b67a;;
    box-shadow: black 0 8px 15px;
    width: 70vh;
    margin: auto;
    height: fit-content;
}
#pp1{
    float: left;
    display: inline;
    font-weight: 700;  
}
#pp2{
    font-size: 13px;
    text-align: center;
    margin: auto;
}
#name, #email{
    border: transparent;
    border-bottom: 2px solid #35b67a;
    width: 45vh;
    height: 45px;
    padding-left: 5%;
    font-size: 15px;
}
#message{
    font-size: 15px;
    border: transparent;
    border-bottom: 2px solid #35b67a;
    width: 50vh;
    padding-left: 5%;
    padding-top: 6%;
    resize: none;  
}
#attachment{
    display: inline;
    margin-left: 2%;
}
::placeholder{
    color: #35b67a;
}
#name:hover,#email:hover,#message:hover{
    opacity: 0.7;
}
#name:focus,#email:focus,#message:focus{
    outline: none;
    border-bottom: 2px solid darkgreen;
    transition: 0.4s;
}
#submit{
    background-color: white;
    color: #61cf9c;
    width: fit-content;
    font-size: 14px;
    float: right;
    margin-right: 2%;
    border: transparent;
    border-radius: 25px;
    font-family: eb;
}
#submit:hover{
    color: rgb(3, 158, 3);
}
#own{
    color: white;
    background-color: #35b67a;
    text-align: center;
    padding: .5%;
}
#own h3{
    font-size: 12px;
}
#own a{
    font-size: 13px;
    text-decoration: none;
    font-weight: 900;
    color: white;
    font-style: italic;
}
#own h5{
    font-size: 11px;
}
@media screen and (max-width:1292px) {
    #hdg{
        padding-left: 6%;
        top: 65%;
    }
}
@media screen and (max-width:1092px) {
    #vidbtn video{
        width: 440px;
        height: 250px;
    }
}
@media screen and (max-width:991px) {
    #bar{
        padding-bottom: .5%;
    }
    #ggq{
        margin-top: 7%;
        margin-bottom: 7%;
    }
    #vidbtn video{
        width: 480px;
        height: 275px;
    }
    #hdg{
        padding-left: 20%;
        padding-right: 20%;
        top: 66%;
        text-align: center;
    }
}
@media screen and (max-width:807px) {
    #tp1{
        padding: 8%;
    }
}
@media screen and (max-width:533px) {
    #typtxt h3{
        font-size: 25px;
    }
    #typtxt p{
        font-size: 16px;
    }
  	#ggq a, #redm a{
    	font-size: 15px;
	}
}
@media screen and (max-width:525px) {
    #logos img{
        height: 40px;
    }    
    #vidbtn video{
        width: 370px;
        height: 210px;
    }
    #pictxt img{
        width: 90vw;
        height: 80vw;
    }
    #bbc{
        width: 100px;
    }
    #hdg{
        top: 40%;
    }
    #hdg h1{
        font-size: 30px;
    }
    #hdg p{
        font-size: 20px;
    }
    .mySlides{
        padding: 17%;
    }
    .mySlides p{
        padding: 2%;
    }
  	#name, #email{
    	width: 30vh;  
  	}
  	#message{
    	width: 35vh;  
  	}
}
@media screen and (max-width:449px) {
    #typtxt p{
        font-size: 14px;
    }
}
@media screen and (max-width:425px) {
    .navbar-brand img{
        height: 35px; 
        width: 215px;
    }
    #hdg{
        top: 60%;
    }
    #hdg h1{
        font-size: 25px;
    }
    #hdg p{
        font-size: 17px;
    }
    #tp1{
        padding: 6%;
    }
}
@media screen and (max-width:393px) {
    #typtxt p{
        font-size: 11.3px;
    }
}
@media screen and (max-width:375px) {
    #hdg{
        top: 55%;
    }
    #hdg h1{
        font-size: 25px;
    }
    #hdg p{
        font-size: 17px;
    }
	#typtxt h3 {
  		font-size: 23px;
  	}
}
@media screen and (max-width:366px) {
    #hdg h1{
        font-size: 22px;
    }
    #hdg p{
        font-size: 15px;
    }
    #form
    {
        width: 45vh;
    }
}
@media screen and (max-width:320px) {
    #hdg h1{
        font-size: 20px;
    }
    #hdg p{
        font-size: 14px;
    }
    #vidbtn video{
        width: 310px;
        height: 180px;
    }
    #bbc{
        width: 80px;
        height: 20px;
    }
}