* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul, li {
    list-style-type: none;
    margin: 0px;
}
a {
    text-decoration: none !important;
    color: black;
}
body {
    margin-top: 0px !important;
    overflow-x: hidden;
    font-family: Verdana, Geneva, sans-serif;
}
p {
    margin: 0;
}
a, p {
    font-family: Verdana, Geneva, sans-serif;
}
#main-nav {
    top: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    border-bottom: 8px solid #dadfd1;
}
header .menu-content {
    display: flex;
    flex-direction: row;
}
header .logo {
    position: relative;
    overflow: hidden;
    width: 12%;
    height: 100px;
}
header .logo img {
    width: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    margin: auto;
}
header a {
    color: black;
    font-size: 14px;
}
header .button  {
    width: 13%;
    display: flex;
    justify-content: flex-end;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}
header .button span {
    background-color: #e53526;
    border-radius: none!important;
    box-shadow: 1px 1px 1px #AA261B;
    color: #ffffff;
    font-size: 14px;
    border: none !important;
    width: 140px !important;
    padding: 10px 12px;
}
header .menu {
    width: 75%;
}
header .menu nav {
    width: 100%;
    height: 100px;
    margin: 0 auto;
}
header .menu nav ul {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
}
header .menu nav ul li {
    display: inline-block;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 16.666666%;
}
header .menu nav ul li span {
    width: 40px;
    height: 1px;
    background-color: #04b3c7;

}
header .menu nav ul li  a { 
    color: #000;  
    text-transform: uppercase; 
    text-decoration: none; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
header .menu nav ul li  .active span{ 
    display: block 
}
/*fixed nav*/
.fixed-nav{
    width: 100%;
    padding: 0px 30px;
    position: fixed;
    top: 0px;
    left: 0;
    background-color: white;
    z-index: 99;
    height: 100px;
}

/*#fixed nav*/
.content { width: 100%; height: auto; }
.content > section { width: 100%; height:auto; }
header span {
    display: none;
}
.active span {
    display: block;
}


section .mini-infos {
    width: 100%;
    height: 539px;
    position: relative;
}
section .mini-infos .photo {
    width: 100%;
    height: 539px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
section .mini-infos .photo img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}
section .mini-infos .info-detail {
    height: 539px;
    width: 100%;
    position: absolute;
    top: 0px;
    background: rgba(30, 183, 197, 0.7); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(bottom,rgba(30, 183, 197, 0.2),rgba(30, 183, 197, 0.7)); /*Safari 5.1-6*/
    background: -o-linear-gradient(bottom,rgba(30, 183, 197, 0.2),rgba(30, 183, 197, 0.7)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(bottom,rgba(30, 183, 197, 0.2),rgba(30, 183, 197, 0.7)); /*Fx 3.6-15*/
    background: linear-gradient(to bottom,rgba(30, 183, 197, 0.2),rgba(30, 183, 197, 0.7)); /*Standard*/
    display: flex;
    flex-direction: column;
}
section .mini-infos .info-detail .mini-infos-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 54px 0;
    align-items: center;
}
section .mini-infos .info-detail .title {
    font-weight: 700;
    font-size: 50px;
    color: white;
}
section .mini-infos .info-detail .date {
    font-weight: 700;
    font-size: 23px;
    color: white;
    margin: 20px 0px;
}
section .mini-infos .info-detail .info {
    width: 450px;
    height: auto;
}
section .mini-infos .info-detail .info p{
    font-size: 17px;
    color: white;
}
section .mini-infos .explore-btn {
    margin-top: 20px;
}
section .mini-infos .explore-btn span {
    border: none;
    height: 50px;
    width: 158px;
    color: white;
    background-color: #172a53;
    font-size: 17px;
    box-shadow: 1px 1px 1px #0F1B37;
}
section .mini-infos .info-detail .com-infos {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section .mini-infos .info-detail .com-infos p {
    color: white;
    font-size: 15px;
}
section .mini-infos .info-detail .com-infos .com-info-links {
    display: flex;
    flex-direction: row;
    width: 215px;
    margin-top: 15px;
}
section .mini-infos .info-detail .com-infos .com-info-links div {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

}
section .mini-infos .info-detail .com-infos .com-info-links div i {
    color: white;
    font-size: 23px;
}

/*section title*/
section .section-title p {
    font-weight: 700;
    color: #172a53;
    font-size: 24px;
}
section .section-title {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 40px 0;
}
section .section-title::after {
    content: "";
    width: 155px;
    height: 2px;
    background-color: #04b3c7;
    position: absolute;
    margin: auto;
    bottom: 0px;
    align-self: center;
}
/*streetball*/
section .streetball-content .container .row .streetball-info {
    margin-bottom: 40px;
}
section .streetball-content .container .row .streetball-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
section .streetball-content .container .row .streetball-detail .circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid #04b3c7;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
section .streetball-content .container .row .streetball-detail .circle i {
    color: #04b3c7;
    font-size: 40px;
}
section .streetball-content .container .row .streetball-detail .sub-title {
    margin: 20px 0px;
}
section .streetball-content .container .row .streetball-detail .sub-title p {
    text-align: center;
    color: #172a53;
    font-weight: 600;
    font-size: 18px;
}
section .streetball-content .container .row .streetball-detail .explanation p {
    color: #707070;
    font-size: 13px;
}
/*media*/
#medya .container .owl-carousel, #medya .container .owl-carousel .item {
    height: 300px;
}
#medya .container .owl-carousel .item {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#medya .container .owl-carousel .owl-dots {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    position: absolute;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    bottom: 10px;
}
#medya .container .owl-carousel .owl-dot {
    border-radius: 50px;
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    margin-left: 5px;
    margin-right: 5px;
}
#medya .container .owl-carousel .owl-dot.active {
    background: rgba(255, 255, 255, 1);
}
#medya .container .media-title {
    margin: 20px 0px;
}
#medya .container .media-title p {
    font-size: 22px;
    color: #172a53;
    font-weight: 600;
}
#medya .container .media-infos-detail p {
    color: #707070;
    font-size: 14px;
}
#medya .container .media-video iframe {
    height: 300px !important;
}
/*tournament*/
#turnuva .tournament {
    height: 400px;
    width: 100%;
    position: relative;
    margin: 40px 0px 0px 0px ;
}
#turnuva .tournament .tournament-image {
    width: 100%;
    height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
}
#turnuva .tournament .tournament-image img {
    width: 100%;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#turnuva .tournament .tournament-info {
    position: absolute;
    top: 0;
    height: 400px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
#turnuva .tournament .tournament-info .section-title p {
    color: white !important;
}
#turnuva .tournament .tournament-info .tournament-info-detail {
    margin-left: 30px;
    margin-top: 20px;
}
#turnuva .tournament .tournament-info .tournament-info-detail .mini-title {
    color: white;
    font-size: 14px;
    font-weight: 700;
}
#turnuva .tournament .tournament-info .tournament-info-detail .mini-info {
    color: white;
    font-size: 12px;
    margin: 6px 0px;
}
#turnuva .tournament .tournament-info .tournament-sub-title p, #turnuva .tournament .tournament-info .tournament-sub-title i {
    color: white;
    font-size: 20px;
    font-weight: 700;
}
#turnuva .tournament .tournament-info .tournament-info-detail .second-mini-info {
    margin-top: 30px;
} 
#turnuva .tournament .tournament-info .tournament-info-detail .mini-info .first-team {
    color: #ea6b85;
}
#turnuva .tournament .tournament-info .tournament-info-detail .mini-info .second-team {
    color: #84c9ee;
} 
#turnuva .tournament .tournament-info .more-btn {
    width: 160px;
    margin-left: 30px;
    margin-top: 50px;
}
#turnuva .tournament .tournament-info .more-btn span {
    border: none;
    background-color: #04b3c7;
    box-shadow: 1px 1px 1px #198793;
    color: white;
    font-size: 14px;
    padding: 10px;
    border-radius: none;
}
/*program*/
#program .schedule {
    background-image: url(images/bg.png);
    width: 100%;
    height: auto;
    background-size: cover;
}
/*
#program .schedule .activity-plan {
    padding-top: 50px;
}*/
#program .schedule .activity-title {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
#program .schedule .activity-title p {
    font-size: 18px;
    color: white;
}
#program .schedule .activity-title p span {
    font-size: 13px;
}
#program .schedule .first-day {
    background-color: #172a53;
    padding-left: 50px;
}
#program .schedule .second-day {
    padding-left: 50px;
    background-color: #04b3c7;
}
#program .schedule .activity-plan-detail {
    display: flex;
    flex-direction: row;
    padding: 20px 50px;
    background-color: white;
    border: 1px solid #dfdfdf;
}
#program .schedule .activity-plan-detail:hover {
    background-color: #f5f5f5;
}
#program .schedule .activity-plan-detail .activity-image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
#program .schedule .activity-plan-detail .activity-image img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
}
#program .schedule .activity-plan-detail .activity-info {
    margin-left: 20px;
}
#program .schedule .activity-plan-detail .activity-info .date {
    font-size: 14px;
    color: #707070;
}
#program .schedule .activity-plan-detail .activity-info .name {
    font-size: 14px;
    color: #172a53;
    font-weight: 600;
}
#program .schedule .activity-plan-detail .activity-info .explanation {
    font-size: 12px;
    color: #707070;
}
#program .schedule .activity-plan .row {
    display: flex;
    flex-direction: row;
}
#program .schedule .activity-content {
    width: 50%;
}
/*bilgilendirme*/
#bilgilendirme .information {
    background-image: url(images/bg.png);
    width: 100%;
    height: auto;
    background-size: 100% auto;
}
#bilgilendirme .information .container {
    background-color: #fff;
    border: 1px solid #d4d8dd;
}
#bilgilendirme .information .container .information-detail {
    margin: 20px 50px 0px 50px;
    position: relative;
    height: auto;
    border-bottom: 1px solid #d4d8dd;
}
#bilgilendirme .information .container .information-detail .visible {
    color: #172a53;
    font-size: 15px;
    margin-bottom: 20px;
}
#bilgilendirme .information .container .information-detail .visible span {
    position: absolute;
    right: 50px;
}
#bilgilendirme .information .container .information-detail .visible span i {
    color: #04b3c7;
    font-size: 20px;
    font-weight: 600;
}
#bilgilendirme .information .container .information-detail .visible-info {
    color: #707070;
    font-size: 13px;
    margin-bottom: 30px;
    display: none;
}

/*kullanici form*/
#katilim-formu .form {
    padding-top: 50px;
    background-color: #fafafa;
}
#katilim-formu .form .section-title {
    margin-top: 0px;
    margin-bottom: 60px;
}
#katilim-formu .form .form-photo {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    padding-right: 50px;
}
#katilim-formu .form .photo {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border: 1px solid #cccccc;
    background-color: white;
    padding: 10px;
}
#katilim-formu .form .photo img {
    width: 88%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}
#katilim-formu .form .form-photo .photo-btn {
    display: flex;
    flex-direction: column;
}
#katilim-formu .form .form-photo .photo-btn span {
    padding: 8px 54px;
    width: 100%;
    border: none;
    margin-top: 10px;
    border-radius: 0 !important;
    color: white;
    font-size: 14px;
}
#katilim-formu .form .form-photo .photo-btn .photo-new {
    background-color: #04b3c7;
    box-shadow: 1px 1px 1px #00717e; 
}
#katilim-formu .form .form-photo .photo-btn .photo-user {
    background-color: #e53526;
    box-shadow: 1px 1px 1px #8c2118; 
}
#katilim-formu .form .form-detail form {
    padding-left: 50px;
}
#katilim-formu .form .form-detail form .form-group {
    display: flex;
    flex-direction: row;
    padding: 20px 20px;
    border: 1px solid #d1d4d9;
    align-items: center;
    margin-bottom: 15px;
}
#katilim-formu .form .form-detail form .form-control {
    border-radius: 0px;
    border: 1px solid #bcbac9;
}
#katilim-formu .form .form-detail form .part-name {
    display: flex;
    justify-content: flex-start;
    width: 30%;
}
#katilim-formu .form .form-detail form .input-part {
    display: flex;
    justify-content: flex-end;
    width: 70%;
    position: relative;
}
#katilim-formu .form .form-detail form .input-part input {
    border-radius: 0px;
}
#katilim-formu .form .form-detail form .input-part i {
    color: #6dc9d7;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
}
#katilim-formu .form .form-detail form .check-control {
    padding: 20px;
    border: 1px solid #d1d4d9;
}
#katilim-formu .form .recap {
    margin-top: 15px;
    margin-bottom: 15px;
}
#katilim-formu .form .recap .form-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
}
#katilim-formu .form .recap .form-btn input {
    width: 163px;
    height: 43px;
    border: none;
    background-color: #04b3c7;
    box-shadow: 1px 1px 1px #047986;
    color: #ffffff;
}
#katilim-formu .form .recap .form-btn i {
    color: #ffffff;
    position: absolute;
    right: 15px;
    top: 15px;
}
/*footer*/
footer .footer {
    height: 100px;
    border-top: 1px solid #626262;
    background-color: white;
}
footer .footer .col-sm-6 {
    display: flex;
    align-items: center;
    align-content: center;
    height: 60px;
}
footer .footer .logo {
    width: 150px;
    height: 50px;
    position: relative;
}
footer .footer .logo img {
    position: absolute;
    top: 40px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}
footer .footer .copy {
    justify-content: flex-end;
    margin-top: 20px;
}
footer .footer .copy p {
    color: #646363;
    font-size: 14px;
}
/**/
/*responsive-menu*/
.top {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    align-content: center;
    margin-bottom: 40px;
}
.top i,  .top p {
    color: white;
    font-size: 25px;
    font-weight: 700;
}
.top i {
    color: #06353a;
    font-size: 40px !important;
}
.top .closing-btn {
    position: absolute;
    right: 0;
}
.resp {
    position: relative;
}
header .responsive-menu-resp {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    z-index: 999999;
}
header .responsive-menu {
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    z-index: 99999;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: none !important;
}
.resp-menu-details {
    flex-direction: column ;
    justify-content: flex-start ;
    align-items: flex-start ;
    align-content: flex-start ;
    width: 75% ;
    margin-top: 40px;
}
.resp-menu-content {
    display: none;
    width: 65%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 40px;
    background-color: #04b3c7;
}
.resp-menu-details div {
    height: 40px ;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) ;
    display: flex;
    align-items: center;

}
.resp-menu-details div  a {
    color: white;
    font-weight: 700;
    font-size: 17px;
}
.responsive-menu-resp .logo {
    width: 100px;
    height: 80px;
    position: relative;
} 
.responsive-menu .logo {
    width: 180px;
    height: 80px;
    position: relative;
}
.responsive-menu-resp .logo img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}
.responsive-menu .logo img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}
header .opened{
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0;
    margin-bottom: 40px;
}
.opened .logo-content, .opened .resp-btn-content {
    height: 80px;
    display: flex;
    align-items: center;
    align-content: center;
}
.opened .logo-content {
    justify-content: flex-start;
}
.opened .resp-btn-content {
    justify-content: flex-end;
}
.opened .resp-btn-content div {
    width: 150px;
    height: 50px;
    background-color: #04b3c7;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    box-shadow: 1px 1px 2px #015B66;
}
.opened .resp-btn-content div i, .opened .resp-btn-content div p {
    color: white;
    font-size: 15px;
}