@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


/* font-family: 'Zen Kurenaido', sans-serif; 
font-family: 'Montserrat', sans-serif;*/

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

header {
  position: fixed;
  top: 3px;
  width: 100%;
  z-index: 999;
}


#menu__toggle {
    opacity: 0;
  }

.menu__box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
    transition-duration: .25s;
    margin-top: -20px;
  }
  
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Zen Kurenaido', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #CFD8DC;
  }

  li:first-child > .menu__item {
    color: transparent;    
	  -webkit-background-clip: text;
	  background-clip: text;
	  background-image: linear-gradient(to right, red, fuchsia);
  }

  
  li:first-child > .menu__item:hover {
    color: #333;
    transition: ease-out .5s;
  }
  
.scroll-indicator {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  margin-top: 3px;
}
main {
  margin-top: 50px;
}

section {
  margin: 50px auto 0;
	overflow-x: hidden;
}

#slide {
  height: 100vh;
}

h2 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  margin-bottom: 70px;
  padding: 50px;
}

.all_sliders p {
  font-family: 'Montserrat', sans-serif;
  margin: 0 auto 70px;
  max-width: 600px;
  padding: 0 20px;
}


.aboutme p {
  font-family: 'Montserrat', sans-serif;
  margin: 0 auto 70px;
  max-width: 700px;
  padding: 0 20px;
}

@supports (height: 100vh) { 
  body{ 
    background: linear-gradient(to right top, #0089f2 50%,#ddd 50%) 0 50px / 100% calc(100% - 100vh) no-repeat #ddd;
  }
    body:before {
      content:'';
      position: fixed;
      top: 47px;
      bottom: 0;
      width: 100%;
      z-index: -1;
      background: white;
    }
  }

/* FORM */
#content{
	position:relative;
	margin:50px auto;   
	width: 500px;
	min-height:200px;
	z-index:100;
	padding:30px;
	border:1px solid #383838;   
	background: #D1D1D1;
	background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px);
	border-radius:8px;
	box-shadow:0px 1px 6px #3F3F3F;
}

#content:after{
	background:#F9F9F9;
	margin:10px;
	position: absolute;
	content : " ";
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1; 
	border:1px #E5E5E5 solid;       
	border-radius:8px;
}

#content h1 {
	font-family: 'Questrial', Verdana, sans-serif;
	text-align:center;
	font-size:40px;
	padding:0;
	margin:0 0 20px 0;
	position:relative;
	color:#8C8C8C;
}

input:required, textarea:required {
	-moz-box-shadow:none; 
	-webkit-box-shadow:none; 
	-o-box-shadow:none; 
	box-shadow:none; 
}

input:not([type="submit"]),
	textarea{
	outline:none;
	display:block;
	width:100%;
	padding:4px 8px;
	border:1px dashed #DBDBDB;
	color:#3F3F3F;
	font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;
	font-size:14px;
	border-radius:2px;
	transition:background 0.2s linear;
	box-shadow: 0.6s linear;
}

input:not([type="submit"]):active,
textarea:active,
input:not([type="submit"]):focus,
textarea:focus{
	background:#F7F7F7;
	border:dashed 1px #969696;
	box-shadow:2px 2px 7px #E8E8E8 inset;
}

input:not([type="submit"]){
	height: 20px;
}

textarea{
	min-height:150px;
	resize:vertical
}

::-webkit-input-placeholder  {
	color:#BABABA;
	font-style:italic;
}

input:-moz-placeholder,
textarea:-moz-placeholder{
	color:#BABABA;
	font-style:italic;
}

.button_box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

input[type=reset],
input[type=submit] {
  width: 200px;
  height: 40px;
	cursor:pointer;
	background:none;
	border:none;
	font-family: 'Alice',serif;
	color:#767676;
	font-size:18px;
	padding:10px 4px;
	border:1px solid #E0E0E0;
	text-shadow: 0px 1px  1px #E8E8E8;
	background: rgb(247,247,247);
	background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
	border-radius:5px;
	box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
	transition:all 0.2s linear;
}
 
input[type=reset]:hover,
input[type=submit]:hover{
	color:#686868;
	border-color: #CECECE;
	background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
	box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;       
}

input[type=reset]:active,
input[type=reset]:focus,
input[type=submit]:active,
input[type=submit]:focus {
	position:relative;
	top:1px;
	color:#515151;
	background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
	box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}

label{
	color:#7F7E7E;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	transition: color 1s ease;
}
label:hover{
	color:#191919;
}
label:before{
	color:#C1BFBD;
	transition: color 1s ease;
}
label:hover:before{
	color:#969696;
	transition: color 1s ease;
}
 
p{
	margin-bottom:20px;
}
.indication{
	color:#878787;
	font-size:12px;
	font-style:italic;
	text-align:right;
	padding-right:10px;
}
.required{
	color:#E5224C;
}

/* Accordion */
#accord {
  height: 100vh;
}

.accordion {
  margin: 0 auto;
  width: 399px;
  background:#fff;
  -webkit-box-shadow: 0px 0px 5px 2px #747474;
  -moz-box-shadow: 0px 0px 5px 2px #747474;
  box-shadow: 0px 0px 5px 2px #747474;
}
.accordion ul {
  list-style:none;
  margin:0;
  padding:0;    
}
.accordion li {
  margin:0;
  padding:0;
  margin-right: -1px;
}
.accordion [type=radio], .accordion [type=checkbox] {
  display:none;
}
.accordion label {
  display:block;
  cursor:pointer;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
}

.accordion .content {
  padding:0 10px;
  overflow:hidden;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
}

.accordion p {
  color:#333;
  margin:0 0 10px;
}

.accordion h3 {
  color:#ffffff;
  padding: 0;
  margin: 20px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.accordion p {
  color:#ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

.accordion ul li:nth-child(3) .content h3,
.accordion ul li:nth-child(3) .content p,
.accordion ul li:nth-child(5) .content h3,
.accordion ul li:nth-child(5) .content p {
  color:#000;
}

.horizontal {
  overflow: hidden;
  height: 200px;
}
.horizontal ul li {
  float: left;
}
.horizontal ul li label {
  text-align: center;
  width: 50px;
  float:left;
}
.horizontal ul li .content {
  height: 200px;
  padding: 0;
  display: inline-block;
  visibility: hidden;
  width: 1px;
  border-left: 0;
}
.horizontal [type=radio]:checked ~ label {
  border-right:0;    
}

.horizontal [type=radio]:checked ~ label ~ .content {    
  visibility:visible;
  height: 200px;
  width: 150px;
  padding: 0 10px;
  border-left:0;    
}


.label_block {
  width: 50px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-content: space-around;
}

.label_block .block_text {
  height: 150px;
  width: 50px;
}

.accordion ul li:nth-child(1) .label_block {
  background-color: #BE0C0C;
}

.accordion ul li:nth-child(1) .svg_block,
.horizontal ul li:nth-child(1) .content {
  background-color: #FF0000;
}

.accordion ul li:nth-child(2) .label_block {
  background-color: #BE7F0C;
}

.accordion ul li:nth-child(2) .svg_block,
.horizontal ul li:nth-child(2) .content {
  background-color: #FFA500;
}

.accordion ul li:nth-child(3) .label_block {
  background-color: #C0C00C;
}

.accordion ul li:nth-child(3) .svg_block,
.horizontal ul li:nth-child(3) .content {
  background-color: #FFFF00;
}

.accordion ul li:nth-child(4) .label_block {
  background-color: #0C650C;
}

.accordion ul li:nth-child(4) .svg_block,
.horizontal ul li:nth-child(4) .content {
  background-color: #008000;
}

.accordion ul li:nth-child(5) .label_block {
  background-color: #0CBE0C;
}

.accordion ul li:nth-child(5) .svg_block,
.horizontal ul li:nth-child(5) .content {
  background-color: #00FF00;
}

.accordion ul li:nth-child(1) .label_block > .svg_block svg polygon:last-child {
  fill: #BE0C0C;
}

.accordion ul li:nth-child(1):hover .label_block > .svg_block svg polygon:last-child,
.accordion ul li:nth-child(2):hover .label_block > .svg_block svg polygon:last-child,
.accordion ul li:nth-child(3):hover .label_block > .svg_block svg polygon:last-child,
.accordion ul li:nth-child(4):hover .label_block > .svg_block svg polygon:last-child,
.accordion ul li:nth-child(5):hover .label_block > .svg_block svg polygon:last-child {
  fill: rgba(255, 255, 255, 0);
}

.accordion ul li:nth-child(2) .label_block > .svg_block svg polygon:last-child {
  fill: #BE7F0C;
}

.accordion ul li:nth-child(3) .label_block > .svg_block svg polygon:last-child {
  fill: #C0C00C;
}

.accordion ul li:nth-child(4) .label_block > .svg_block svg polygon:last-child {
  fill: #0C650C;
}

.accordion ul li:nth-child(5) .label_block > .svg_block svg polygon:last-child {
  fill: #0CBE0C;
}

.label_block .block_text p {
  justify-content: center;
  writing-mode: tb-rl;
  transform:rotate(180deg);
  line-height: 50px;
  height: 150px;
  padding: 5px 0;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

.svg_block {
  height: 50px;
  width: 50px;
  order: 2;
}

.svg_block svg {
  height: 100%;
  width: 100%;
  position: relative;
}

.svg_block svg polygon:first-child {
  fill: #fff;
}

svg polygon {
  position: absolute;
  top: 0;
  left: 0;
}

footer {
  height: 50px;
  background: linear-gradient(132deg, 
#F0F8FF 1%,
#00FFFF 2%,
#7FFFD4 3%,
#F0FFFF 4%,
#F5F5DC 5%,
#FFE4C4 6%,
#000000 7%,
#FFEBCD 8%,
#0000FF 9%,
#8A2BE2 10%,
#A52A2A 11%,
#DEB887 12%,
#5F9EA0 13%,
#7FFF00 14%,
#D2691E 15%,
#FF7F50 15%,
#6495ED 17%,
#FFF8DC 18%,
#DC143C 19%,
#00FFFF 20%,
#00008B 21%,
#008B8B 22%,
#B8860B 23%,
#A9A9A9 24%,
#006400 25%,
#BDB76B 26%,
#556B2F 27%,
#FF8C00 28%,
#9932CC 29%,
#8B0000 30%,
#E9967A 31%,
#8FBC8F 32%,
#483D8B 33%,
#2F4F4F 34%,
#00CED1 35%,
#9400D3 36%,
#FF1493 37%,
#00BFFF 38%,
#696969 39%,
#1E90FF 40%,
#B22222 41%,
#FFFAF0 42%,
#228B22 43%,
#FF00FF 44%,
#DCDCDC 45%,
#F8F8FF 46%,
#FFD700 47%,
#DAA520 48%,
#808080 49%,
#008000 50%,
#ADFF2F 51%,
#F0FFF0 52%,
#FF69B4 53%,
#CD5C5C 54%,
#4B0082 55%,
#FFFFF0 56%,
#F0E68C 57%,
#E6E6FA 58%,
#FFF0F5 59%,
#7CFC00 60%,
#FFFACD 61%,
#ADD8E6 62%,
#F08080 63%,
#E0FFFF 64%,
#FAFAD2 65%,
#D3D3D3 66%,
#90EE90 67%,
#FFB6C1 68%,
#FFA07A 69%,
#20B2AA 70%,
#87CEFA 71%,
#778899 72%,
#B0C4DE 73%,
#FFFFE0 74%,
#00FF00 75%,
#32CD32 76%,
#FAF0E6 77%,
#FF00FF 78%,
#800000 79%,
#66CDAA 80%,
#0000CD 81%,
#BA55D3 82%,
#9370DB 83%,
#3CB371 84%,
#7B68EE 85%,
#00FA9A 86%,
#48D1CC 87%,
#C71585 88%,
#191970 89%,
#F5FFFA 90%,
#FFE4E1 91%,
#FFE4B5 92%,
#FFDEAD 93%,
#000080 94%,
#FDF5E6 95%,
#808000 96%,
#6B8E23 97%,
#FFA500 98%,
#FF4500 99%,
#DA70D6 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

footer span {
  background-color: #fff;
  line-height: 25px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}







@media screen and (max-width: 720px) {   

      #menu__toggle:checked ~ .menu__btn > span {
        transform: rotate(45deg);
      }
      #menu__toggle:checked ~ .menu__btn > span::before {
        top: 0;
        transform: rotate(0);
      }
      #menu__toggle:checked ~ .menu__btn > span::after {
        top: 0;
        transform: rotate(90deg);
      }
      #menu__toggle:checked ~ .menu__box {
        visibility: visible;
        left: 0;
      }
      
      .menu__btn {
        display: flex;
        align-items: center;
        position: fixed;
        top: 20px;
        left: 20px;
      
        width: 26px;
        height: 26px;
      
        cursor: pointer;
        z-index: 1;
      }
      
      .menu__btn > span,
      .menu__btn > span::before,
      .menu__btn > span::after {
        display: block;
        position: absolute;
      
        width: 100%;
        height: 2px;
      
        background-color: #616161;
      
        transition-duration: .25s;
      }
      .menu__btn > span::before {
        content: '';
        top: -8px;
      }
      .menu__btn > span::after {
        content: '';
        top: 8px;
      }
      
      .menu__box {
        display: block;
        position: fixed;
        visibility: hidden;
        top: 0;
        left: -100%;
      
        width: 300px;
        height: 100%;
      
        margin: 0;
        padding: 80px 0;
      
        list-style: none;
      
        background-color: #ECEFF1;
        box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
      
        transition-duration: .25s;
      }
      
      .menu__item {
        display: block;
        padding: 12px 24px;
      
        color: #333;
      
        font-family: 'Zen Kurenaido', sans-serif;
        font-size: 20px;
        font-weight: 600;
      
        text-decoration: none;
      
        transition-duration: .25s;
      }
      .menu__item:hover {
        background-color: #CFD8DC;
      }

      .scroll-indicator {
        height: 3px;
      }
      main {
        margin-top: 0px;
      }

      @supports (height: 100vh) { 
        body{ 
          background: linear-gradient(to right top, #0089f2 50%,#ddd 50%) 0 50px / 100% calc(100% - 100vh) no-repeat #ddd;
        }
          body:before {
            content:'';
            position: fixed;
            top: 3px;
            bottom: 0;
            width: 100%;
            z-index: -1;
            background: white;
          }
        }
}