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 {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	vertical-align: baseline;

}

html{

	scroll-behavior: smooth;

}
article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}
@font-face {
  font-family:web-pixel;
  src: url(../text-font/static/Inter-Regular.ttf);
}
@font-face {
  font-family:web-pixel-sec;
  src: url(../text-font/Raleway/static/Raleway-Regular.ttf);
}
body {
	font-family:web-pixel-sec;
}
ol, ul {

	list-style: none;

}

b{
	color:#858585;
	
}
blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}
nav{
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:2%;
    top: 0;
    left: 0;
    width: 96%;
    max-width: none;
    height: auto;
    z-index: 99;
    transition: all .2s ease;
    position: fixed;
	border-bottom: 5px solid transparent;
	background-color:white;
}
.nav-brand{
	width:30%;
	height:max-content;
	display:flex;
}
.nav-logo{
	width: 120px;
}
.nav-logo img{
	width:70px;
	height:70px;
}
.nav-content{
	width:70%;
	height:max-content;
	display:flex;
}
.links{
	margin-left: auto;
    margin-right: 10%;
}
.links ul{
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.links ul li a{
	font-size: 17px;
    font-weight: 600;
    text-align: center;
	padding: 8px 12.3076923077px;
	text-decoration:none;
	color:#ED7414;
	transition:all .5s;
}
.links ul li .active{
	background: #ffedd1!important;
    border-radius: 6px!important;
}
.links ul li a:hover{
	color:#FF931E;
}
.unidoge-button{
	color:white;
	font-size: 17px;
    font-weight: 600;
    text-align: center;
	border-radius: 6px;
	padding: 8px 12.3076923077px;
	background: -webkit-linear-gradient(135deg,#FFD2A2 0%,#FF931E 40%,#FF931E 54%,#FFD2A2 100%);
    background: linear-gradient(135deg,#FFD2A2 0%,#FF931E 40%,#FF931E 54%,#FFD2A2 100%);
	transition:all .2s;
	cursor:pointer;
	border-bottom:3px solid transparent;
	border-right:3px solid transparent;
	text-decoration:none;
}
.button-container{
	display:flex;
}
.unidoge-button-sec{
	color:white;
	font-size: 17px;
    font-weight: 600;
    text-align: center;
	border-radius: 6px;
	padding: 8px 12.3076923077px;
	background: -webkit-linear-gradient(135deg,#00FFFF 0%,#0071BC 40%,#0071BC 54%,#00FFFF 100%);
    background: linear-gradient(135deg,#00FFFF 0%,#0071BC 40%,#0071BC 54%,#00FFFF 100%);
	transition:all .2s;
	cursor:pointer;
	border-bottom:3px solid transparent;
	border-right:3px solid transparent;
}
.unidoge-button-sec:hover{
	border-color:#0071BC;
}
.unidoge-button:hover{
	border-color:#FF931E;
}
.links ul li .active:hover{
	color:#ED7414 !IMPORTANT;
}
.container{
	width: 1250px;
    margin: 0 auto;
}
footer{
	background: -webkit-linear-gradient(135deg,#ffedd1 0%,#ffe0b0 40%,#ffe0b0 54%,#ffedd1 100%);
    background: linear-gradient(135deg,#ffedd1 0%,#ffe0b0 40%,#ffe0b0 54%,#ffedd1 100%);
	padding-top:5%;
	padding-bottom:5%;
}
.footer-content{
	width:100%;
	display:flex;
	height:max-content;
	padding-bottom:2%;
	padding-top:2%;
}
.leftside-footer{
	width:50%;
}
.leftside-footer h1{
	font-size: 1.5em;
	line-height:1.5em;
    font-weight:bold;
	color:#ED7414;
}
.rightside-footer{
	width:50%;
	 display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.rightside-footer p{
	font-weight:bold;
}
.footer-social{
	width:100%;
	border-top:1px solid #ffcaa1;
	padding-top:2%;
	padding-bottom:2%;
	display:flex;
}
.section{
	padding-top:100px;
	padding-bottom:100px;
	display:flex;
}
.section h1{
    font-size: 34px;
    font-weight: 900;
	color:#343f52;
	padding-bottom:1em;
}
.section p{
	font-size: 19px;
    line-height: 1.2;
	padding-top:1em;
	padding-bottom:1em;
	font-weight:bold;
	color:#717171;
}
.left-section{
	width:60%;
	height:max-content;
}
.footer-logo{
	width:100px;
	height:86px;
	margin-bottom:20px;
}
.social-item{
	width:35px;
	height:35px;
	margin-right:10px;
}
.social-item img{
	width:100%;
	height:100%;
}
.footer-social .rightside-footer{
	flex-direction: row;
    justify-content: flex-start;
}
.scroll{
	border-bottom: 5px solid #ffedd1;
    border-radius: 6px;
    box-shadow: 0 -10px 35px rgb(0 0 0 / 10%);
	background: white;
}
.content{
	padding-top:130px;
}
.social-items{
	display:flex;
	padding-top:10%;
	padding-bottom:10%;
}
#buy{
	background-color:#ffedd1;
}
#team .container{
	flex-direction: column;
    align-items: center;
}
#team .container p{
	text-align:center;
	padding-left:15%;
	padding-right:15%;
}
#faq{
	border-top: 1px solid #f7f7f7;
}
#faq .container{
	flex-direction: column;
    align-items: center;
}
#faq .container p{
	text-align:center;
	padding-left:15%;
	padding-right:15%;
}
#roadmap{
	background-color:#edf8ff;
}
#roadmap .container{
	flex-direction: column;
    align-items: center;
}
#roadmap .container p{
	text-align:center;
	padding-left:15%;
	padding-right:15%;
}
.unidogeimg1{
	width:100%;
	height:40vh;
	background-image:url(../images/how-to.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.section .subtitle{
	color: #f6a429;
    font-weight: 900;
	font-size: 1em;
    line-height: 1.5;
	padding-top:1em;
	padding-bottom:1em;
}
.section .container{
	display:flex;
}
.secondary-section .left-section{
	width:40%;
}
.secondary-section .right-section{
	width:40%;
}
#buy .container{
	justify-content: space-evenly;
}
.secondarycontainerbutton{
	align-items: flex-start;
    justify-content: flex-start
}
.secondarycontainerbutton .unidoge-button-sec{
	margin-right:10px;
}
.team-cards{
		display:flex;
		width:70%;
		padding-top:100px;
		padding-bottom:100px;
}
.team-card{
	display:flex;
	width:50%;
	flex-direction: column;
	align-items: center;
}
.team-card-image{
	width:200px;
	height:200px;
	border: double 10px transparent;
	background-image: linear-gradient(white, white), radial-gradient(circle at top left, #00FFFF,#0071BC);
	background-origin: border-box;
	background-clip: content-box, border-box;
	border-radius:50%;
}
.team-card-image img{
	width:100%;
	height:100%;
	border-radius:50%;
}
.team-card-title{
	font-weight: bold;
    font-size: 19px;
    color: #343f52;
    line-height: 1;
	padding:20px;
}
.team-card-author{
	font-weight: bold;
    font-size: 15px;
    color: #0071BC;
    line-height: 1;
	padding-bottom:20px;
}
#team .button-container .unidoge-button-sec{
	font-size:30px;
}
.phase-container{
	width:100%;
	display:flex;
}
.phase{
	display:flex;
	width:29%;
	padding:2%;
	flex-direction: column;
}
.phase-circle{
    background: linear-gradient(to right top, #00FFFF,#0071BC);
	border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    color: #fff;
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	font-weight:bold;
}
.phase-circle-container{
width:100%
}
.phase-rule{
	width:96%;
	padding: 0.6em 1em;
	margin:18px 0px;
	background-color:white;
	border-radius:10px;
	font-weight:bold;
	font-size:17.6px;
	color:#222;
	transition:all .5s;
}
.phase-rule.non-focus{
	 opacity: .7;
}
.phase-rule:hover{
	opacity:1!IMPORTANT;
}
.phase-title{
	font-size:24px;
	padding-top:15px;
	padding-bottom:15px;
	font-weight:bold;
	color:#0071BC;
}
.accordion {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:50px 0px;
}
.accordion-left{
	width:50%;
}
.accordion-right{
	width:50%;
}
.accordion__item {
  margin-bottom: 5%;
  width:98%;
}
.accordion__title {
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
	font-size: 20px;
	color: #ED7414;
    border: 1px solid #e6eaee;
    border-radius: 6px;
    box-shadow: 15px 12px 13px rgb(255 237 209 / 40%);
	padding:32px !IMPORTANT;
}
.accordion__title::after {
  font-family: "Font Awesome 5 Free";
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  width: 1em;
  height: 1em;
  transition: transform 0.3s ease-in;
}
.is-open .accordion__title::after {
  transform: rotate(180deg);
}
.accordion__body {
  border-radius: 5px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
.accordion__content {
  border: 1px solid #e6eaee;
  border-radius: 6px;
  box-shadow: 15px 12px 13px rgb(255 237 209 / 40%);
   padding: 22.4px 16px;
  margin-top: 5px;
}
.accordion__body p{
	text-align:left !IMPORTANT;
	font-size:16px !IMPORTANT;
	line-height:25px !IMPORTANT;
	 font-weight: 600 !IMPORTANT;
	padding:20px !IMPORTANT;
    color: #717171 !IMPORTANT;
}
.right-section{
		width:40%;
	height:max-content;
}

#home .right-section{
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:50vh;
}
.leg {
  position: absolute;
  bottom: 0;
  width: 3vmax;
  height: 4.125vmax;
}

.paw {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3.75vmax;
  height: 1.875vmax;
  overflow: hidden;
}

.paw::before {
  content: "";
  position: absolute;
  width: 3.75vmax;
  height: 3.75vmax;
  border-radius: 50%;
}

.top {
  position: absolute;
  bottom: 0;
  left: 0.75vmax;
  height: 4.5vmax;
  width: 2.625vmax;
  border-top-left-radius: 1.425vmax;
  border-top-right-radius: 1.425vmax;
  transform-origin: bottom right;
  transform: rotateZ(90deg) translateX(-0.1vmax) translateY(1.5vmax);
  z-index: -1;
  background-image: linear-gradient(70deg, transparent 20%, #FF931E 20%);
}

.dog {
  position: relative;
  width: 22.5vmax;
  height: 8.25vmax;
}

.dog::before {
  content: "";
  position: absolute;
  bottom: -0.75vmax;
  right: -0.15vmax;
  width: 100%;
  height: 1.5vmax;
  background-color: rgba(28, 49, 48, 0.1);
  border-radius: 50%;
  z-index: -1000;
  animation: shadow 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__head {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  border-top-left-radius: 4.05vmax;
  border-top-right-radius: 4.05vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
  background-color: #FF931E;
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__head-c {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  z-index: -1;
}

.dog__snout {
  position: absolute;
  left: -1.5vmax;
  bottom: 0;
  width: 7.5vmax;
  height: 3.75vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #D7DBD2;
  animation: snout 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__snout::before {
  content: "";
  position: absolute;
  left: -0.1125vmax;
  top: -0.15vmax;
  width: 1.875vmax;
  height: 1.125vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #652800;
  animation: snout-b 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__nose {
  position: absolute;
  top: -1.95vmax;
  left: 40%;
  width: 0.75vmax;
  height: 2.4vmax;
  border-radius: 0.525vmax;
  transform-origin: bottom;
  transform: rotateZ(10deg);
  background-color: #D7DBD2;
}

.dog__eye-l, .dog__eye-r {
  position: absolute;
  top: -0.9vmax;
  width: 0.675vmax;
  height: 0.375vmax;
  border-radius: 50%;
  background-color: #652800;
  animation: eye 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__eye-l {
  left: 27%;
}

.dog__eye-r {
  left: 65%;
}
.dog__corn {
	left: -35%;
    position: absolute;
    width: 7.5vmax;
    height: 1.375vmax;
    border-top-left-radius: 0vmax;
    border-top-right-radius: 0vmax;
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
	transform-origin: bottom right;
	transform: rotateZ(50deg);
	border-top-left-radius:100%;
	border-bottom-left-radius:100%;
}

.dog__ear-l, .dog__ear-r {
  position: absolute;
  width: 8.5vmax;
  height: 3.375vmax;
  border-top-left-radius: 0vmax;
  border-top-right-radius: 0vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
  background-color: #f48018;
}

.dog__ear-l {
  top: 1.5vmax;
  left: 6vmax;
  transform-origin: bottom left;
  transform: rotateZ(-50deg);
  z-index: -1;
  animation: ear-l 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__ear-r {
  top: 1.5vmax;
  right: 3vmax;
  transform-origin: bottom right;
  transform: rotateZ(20deg);
  z-index: -2;
  animation: ear-r 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  bottom: 0.3vmax;
  left: 3.75vmax;
  width: 18.75vmax;
  height: 7.2vmax;
  border-top-left-radius: 3vmax;
  border-top-right-radius: 6vmax;
  border-bottom-right-radius: 1.5vmax;
  border-bottom-left-radius: 6vmax;
  background-color: #ffa13d;
  z-index: -2;
  animation: body 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__tail {
  position: absolute;
  right: -3vmax;
  height: 1.5vmax;
  width: 4.5vmax;
  background-color: #f48018;
  border-radius: 1.5vmax;
}

.dog__paws {
  position: absolute;
  bottom: 0;
  left: 7.5vmax;
  width: 12vmax;
  height: 3vmax;
}

.dog__bl-leg {
  left: -3vmax;
  z-index: -10;
}

.dog__bl-paw::before {
  background-color: #bec4b6;
}

.dog__bl-top {
  background-image: linear-gradient(80deg, transparent 20%, #E96839 20%);
}

.dog__fl-leg {
  z-index: 10;
}

.dog__fl-leg {
  left: 0;
}

.dog__fl-paw::before {
  background-color: #D7DBD2;
}

.dog__fr-leg {
  right: 0;
}

.dog__fr-paw::before {
  background-color: #D7DBD2;
}

/*==============================*/
@keyframes head {
  0%, 10%, 20%, 26%, 28%, 90%, 100% {
    height: 8.25vmax;
    bottom: 0;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  5%, 15%, 22%, 24%, 30% {
    height: 8.1vmax;
  }
  32%, 50% {
    height: 8.25vmax;
  }
  55%, 60% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  70%, 80% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(10deg);
  }
}
@keyframes body {
  0%, 10%, 20%, 26%, 28%, 32%, 100% {
    height: 7.2vmax;
  }
  5%, 15%, 22%, 24%, 30% {
    height: 7.05vmax;
  }
}
@keyframes ear-l {
  0%, 10%, 20%, 26%, 28%, 82%, 100% {
    transform: rotateZ(-50deg);
  }
  5%, 15%, 22%, 24% {
    transform: rotateZ(-48deg);
  }
  30%, 31% {
    transform: rotateZ(-30deg);
  }
  32%, 80% {
    transform: rotateZ(-60deg);
  }
}
@keyframes ear-r {
  0%, 10%, 20%, 26%, 28% {
    transform: rotateZ(20deg);
  }
  5%, 15%, 22%, 24% {
    transform: rotateZ(18deg);
  }
  30%, 31% {
    transform: rotateZ(10deg);
  }
  32% {
    transform: rotateZ(25deg);
  }
}
@keyframes snout {
  0%, 10%, 20%, 26%, 28%, 82%, 100% {
    height: 3.75vmax;
  }
  5%, 15%, 22%, 24% {
    height: 3.45vmax;
  }
}
@keyframes snout-b {
  0%, 10%, 20%, 26%, 28%, 98%, 100% {
    width: 1.875vmax;
  }
  5%, 15%, 22%, 24% {
    width: 1.8vmax;
  }
  34%, 98% {
    width: 1.275vmax;
  }
}
@keyframes shadow {
  0%, 10%, 20%, 26%, 28%, 30%, 84%, 100% {
    width: 99%;
  }
  5%, 15%, 22%, 24% {
    width: 101%;
  }
  34%, 81% {
    width: 96%;
  }
}
@keyframes eye {
  0%, 30% {
    width: 0.675vmax;
    height: 0.3vmax;
  }
  32%, 59%, 90%, 100% {
    width: 0.525vmax;
    height: 0.525vmax;
    transform: translateY(0);
  }
  60%, 75% {
    transform: translateY(-0.3vmax);
  }
  80%, 85% {
    transform: translateY(0.15vmax);
  }
}
.nav-desktop{
	display:flex;
	width:100%;
	flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
@media only screen and (min-width: 1025px) {
	.nav-content-phone{
	display:none;
	}
}
@media only screen and (max-width: 1025px) {
	nav{
		display:inherit;
	}
	.container{
		width:80%;
		padding-left:10%;
		padding-right:10%;
	}
	.nav-desktop{
		display:none;
	}
	.section .container{
		flex-direction: column;
	}
	.section{
		flex-direction: column;
	}
	.left-section{
		width:100%;
	}
	.right-section{
		width:100%;
	}
	.secondary-section .left-section{
		width:100%;
	}
	.secondary-section .right-section{
		width:100%;
	}
	.footer-content{
		flex-direction: column;
	}
	.leftside-footer{
		width:100%;
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	.leftside-footer h1{
		text-align:center;
		padding-top:10%;
	}
	.rightside-footer{
		padding-top:10%;
		padding-bottom:10%;
	}
	.rightside-footer{
		width:100%;
	}
	.footer-social{
		flex-direction: column;
	}
	.footer-social .rightside-footer{
		    justify-content: center;
	}
	.unidoge-button-sec{
		width:100%;
		    padding: 8px 0px;
	}
	.unidoge-button{
		width:100%;
		 padding: 8px 0px;
	}
	.secondarycontainerbutton{
		flex-direction: column;
	}
	.secondarycontainerbutton .unidoge-button-sec{
		margin-bottom:10px;
	}
	.phase-container{
		flex-direction: column;
	}
	.phase{
		width:96%;
		margin-top:10%;
	}
	#roadmap .container{
		align-items: flex-start;
	}
	#roadmap .container p{
		text-align:left;
		padding:0;
		padding-bottom:10%;
		padding-top:10%;
	}
	.phase-rule{
		width:90%;
		padding:5%;
	}
	.team-cards{
		flex-direction: column;
		width:100%;
	}
	.team-card{
		width:100%;
		padding-top:10%;
	}
	.button-container{
		width:100%;
	}
	#team .container{
		align-items: flex-start;
	}
	#team .container p{
		text-align:left;
		padding:0;
		padding-bottom:10%;
		padding-top:10%;
	}
	#faq .container{
		align-items: flex-start;
	}
	#faq .container p{
		text-align:left;
		padding:0;
		padding-bottom:10%;
		padding-top:10%;
	}
	.accordion{
		flex-direction: column;
	}
	.accordion-left{
		width:100%;
	}
	.accordion-right{
		width:100%;
	}
	#home .right-section{
		min-height:25vh;
	}
.topnav {
  overflow: hidden;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: #ED7414;
  padding: 16px 18px;
  text-decoration: none;
  font-size: 18px;
  display: block;
  font-weight: 600;
}

.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  margin-top:25px;
}
#myLinks .active{
    background: #ffedd1!important;
	border-radius: 6px!important;
}
#myLinks .unidoge-button{
	color:white;
	width:auto;
}
}