@charset "utf-8";
@font-face
{
   src: url(../bookos.ttf);
   font-family: march;
}
@font-face
{
   src: url(../roboto.ttf);
   font-family: roboto;
}

*
{
   font-family: roboto;
}
body
{
   background-color: #BFE8FB;
   margin: 0;
   padding: 0;
}
.section
{
   width: 100%;
   min-width: 1300px;
}
.center
{
   width: 1266px;
   margin: 0 auto;
}
a
{
   cursor: pointer;
}

/* Overlay */

#overlay
{
   position: fixed;
   z-index: 10;
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0,0,0,0.6);
}
#overlay-box
{
   background-color: seashell;
   border-radius: 20px;
   padding: 25px;
   width: 1000px;
   height: 500px;
   margin: 100px auto 0 auto;
   overflow-y: auto;   
}
#overlay-box > h4
{
   font-size: 45px;
   margin-top: 0;
   text-align: center;
}
#overlay-box > p
{
   font-size: 35px;
   text-align: justify;
   margin: 0;
   width: 100%;
}

/* Header */
#header
{
   height: 150px;
   background-color: #388387;
}
#header *
{
   color: white;
}
#header .center
{
   height: 150px;
}
#header img
{
   float: left;
   height: 130px;
   width: auto;
   margin-top: 10px;
   user-select: none;
}
h1
{
   float: left;
   margin: 0;
   font-size: 80px;
   line-height: 150px;
   font-family: march;
   width: 900px;
}
#contact
{
   padding-top: 20px;
   float: right;
   height: 150px;
   width: auto;
   text-align: right;
}
#contact *
{
   font-size: 20px;
   text-decoration: none;
}

/* Kalandtura header */

#kalandturak-head
{
   background-color: #52C1C7;
   height: 100px;
}
h2
{
   float: left;
   margin: 0;
   font-size: 75px;
   line-height: 100px;
   font-weight: normal;
   color: #301212;
}
#kalandturak-head .links, #taborok-head .links
{
   float: left;
   margin-top: 20px;
   margin-left: 20px;
   padding-left: 10px;
   border-left: solid #301212 2px;
}
#kalandturak-head .links > a
{
   text-decoration: none;
   color: #301212;
   font-size: 20px;
}

/* Kalandturak */

#kalandturak > .center
{
   height: 750px;
}
#kalandturak > .center
{
   background-image: url(tree.svg);
   background-repeat: no-repeat;
   background-position-x: 500px;
   background-position-y: bottom;
   background-size: auto 1200px;
}
.menu
{
   padding: 0;
   list-style: none;
   position: relative;
   width: 70%;
   height: 0;
   padding-top: 70%;
   position: relative;
   margin: 0;
   transition: transform ease-in-out .3s;
}
#wheel
{
   float: left;
   display: block;
   width: 750px;
   height: 750px;
   overflow: hidden;
}

.menu
{
   background-image: url(log.png);
   background-repeat: no-repeat;
   width: 750px;
   height: 750px;
   padding: 0;
}
.menu li
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -webkit-clip-path: url(http://bagolyvar-birodalom.hu/gyerek/index.css#sector);
           clip-path: url(http://bagolyvar-birodalom.hu/gyerek/index.css#sector);
}
.menu li a
{
   display: block;
   width: 100%;
   height: 100%;
}
.menu li:hover
{
   background-color: rgba(0,0,0,0.1);
}

.one
{
   -webkit-transform: rotate(0deg);
           transform: rotate(0deg);
}
.one span
{
   top: 28%;
   right: 15%;
}
.two
{
   -webkit-transform: rotate(-60deg);
           transform: rotate(-60deg);
}
.two span
{
   top: 28%;
   right: 18%;
}
.three
{
   -webkit-transform: rotate(-120deg);
           transform: rotate(-120deg);
}
.four
{
   -webkit-transform: rotate(-180deg);
           transform: rotate(-180deg);
}
.four span
{
   top: 25%;
   right: 8%;
}
.five
{
   -webkit-transform: rotate(-240deg);
           transform: rotate(-240deg);
}
.five span
{
   top: 35%;
   right: 18%;
}
.six
{
   -webkit-transform: rotate(-300deg);
           transform: rotate(-300deg);
}
.six span
{
   top: 30%;
   right: 7%;
}

.icon
{
   position: absolute;
   right: 10%;
   top: 25%;
   text-align: center;
   
   color: #0c495a;
   font-family: Indie Flower;
   font-size: 35px;

   -webkit-transform: rotate(60deg);
           transform: rotate(60deg);
}

p
{
   text-align: center;
   width: 80%;
   margin: 0 auto;
}

#circle-center
{
   position: relative;
   float: left;
   display: block;
   margin-top: -475px;
   margin-left: 275px;
   width: 26%;
   height: 26%;
   border-radius: 50%;
   cursor: pointer;
   user-select: none;
   transition: transform ease-in-out .3s;
}
#circle-center > span
{
   display: block;
   width: 70%;
   height: 70%;
   margin-left: 15%;
   margin-top: 15%;
   background: url(arrow.svg) no-repeat center center;
}
#tura-list
{
   position: relative;
   float: right;
   width: 250px;
   height: 750px;
   padding-right: 45px;
   overflow-y: scroll;
}
#tura-list::-webkit-scrollbar
{ 
   display: none;
}
#tura-list > div
{
   width: 100%;
}
.tura
{
   margin: 0 10px 0 10px;
   width: 90%;
   cursor: pointer;
}
.tura:hover
{
   background-color: rgba(0,0,0,0.3);
}
.tura > img
{
   width: 100%;
   height: 150px;
   background-color: brown;
   margin-bottom: 25px;
}
.tura > h3
{
   font-size: 25px;
   margin: 0;
   color: white;
}

/* Helyszínek head */

#helyszinek-head
{
   background-color: #52C1C7;
   height: 100px;
}

/* Helyszínek */

#helyszinek
{
   height: 1800px;
}
#helyszinek > div > div
{
   width: 49%;
   height: 700px;
}
#helyszinek > div > .left
{
   float: left;
}
#helyszinek > div > .right
{
   float: right;
}
.h-title
{
   font-size: 30px;
   margin-bottom: 5px;
}
.h-img-container
{
   width: 100%;
   height: 200px;
}
.h-img-container > img
{
   width: 49%;
   height: 200px;
   background-color: springgreen;
}
.h-desc
{
   font-size: 20px;
   text-align: justify;
   width: 90%;
   padding: 10px 0 10px 0;
}
.map
{
   width: 100%;
   height: 250px;
}

/* Táborok head */

#taborok-head
{
   height: 100px;
   background-color: #52C1C7;
}

/* Táborok */

table
{
   font-size: 25px;
   width: 100%;
   border-spacing: 0;
   margin: 0;
}
th
{
   font-size: 35px;
   width: calc(100% / 4);
   padding: 10px 0 10px 0;
   background-color: #52C1C7;
}
td
{
   font-size: 20px;
   width: calc(100% / 4);
   text-align: center;
}
table .darker
{
   background-color: rgba(0,0,0,0.1);
}

#footer
{
   background-color: #388387;
   height: 35px;
   line-height: 35px;
   text-align: center;
   margin: 0;
}
table img
{
   width: 100%;
   height: 200px;
}
.headers td
{
   font-size: 25px;
}
.details
{
   text-align: justify;
   font-size: .9em;
}
.descriptions td
{
   text-align: justify;
   padding: 5px 10px 5px 10px;
}
.separator
{
   height: 25px;
}
#taborok-head .links a
{
   color: #301212;
   font-size: 20px;
   text-decoration: none;
}