body {
    background-color: #fff;
    color: #133d56;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    width: 100%;
    overflow-x: hidden;
}
.left-side {
    background-image: url(../images/right-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    width: 100%;
}

.right-side {
    background-image: url('../images/right-img.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    text-align: center;
    width: 100%;
}


.left-side .img-responsive, .right-side .img-responsive{
    display: inline-block;
}
header {
    width: 100%;
    position: absolute;
    z-index: 2;
    padding: 0 50px;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
main {
    padding: 100px 0;
}

header .inner {
    width: 1170px;
    position: relative;
    max-width: 8%;
    margin: 0 auto;
}
.logo-header {
    width: 390px;
    height: 260px;
    max-height: 300px;
    border: 1px solid #d3dadf;
    background-color: #fff;
    text-align: center;

    -moz-box-shadow: -1px 1px 5px 4px rgba(211,218,223,0.45);
    -webkit-box-shadow: -1px 1px 5px 4px rgba(211,218,223,0.45);
    box-shadow: -1px 1px 5px 4px rgba(211,218,223,0.45);

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;

}


.logo-footer img,
.logo-header img{
    width: 107px;
    max-height: 101px;
    margin: 24px;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}



.basketball-pl {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}
.volleyball-pl {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}
h1 {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.btn-intro {
    margin-top: 260%;
    min-width: 230px;
    height: 70px;
    color: #133d56;
    background-color: #5dc0a0;
    border: 3px solid #fff;
    text-transform: uppercase;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    background-image: url(../images/arrow-btn.png);
    background-size: 31px 12px;
    background-repeat: no-repeat;
    background-position: center 40px;
}

.btn-intro:hover { color: #fff; }

.right-side .btn-intro {
}
.left-side .btn-intro {
}
/* Media screens */
@media only screen and (max-width: 1279px) {

}

/* ----------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------*/
@media (min-width: 1441px) {
    .left-side .btn-intro {
        right: -100px;
        top: -224px;
        position: absolute;
    }
    .right-side .btn-intro {
        right: 100px;
        top: -227px;
        position: absolute;
    }
    .logo-header {margin: 44px auto -78px -130px; }
    .right-side, .left-side { display: inline-block; }

    .btn-intro {
        padding: 18px 12px;
        text-align: left;
        background-position: right 15px center;
    }
}

@media (max-width: 1440px) {
    .logo-header {margin: 65px auto -78px -155px;}
    .right-side, .left-side { display: inline-block; }
    .left-side .btn-intro {
        right: -100px;
        top: -224px;
        position: absolute;
    }
    .right-side .btn-intro {
        right: 100px;
        top: -227px;
        position: absolute;
    }
    .btn-intro {
        padding: 20px 12px;
        text-align: left;
        background-position: right 15px center;
        font-size: 15px;
    }

}


@media (min-width: 992px) and (max-width: 1199px) {
    .left-side .btn-intro {
        right: -100px;
        top: -224px;
        position: absolute;
    }
    .right-side .btn-intro {
        right: 100px;
        top: -227px;
        position: absolute;
    }
    .btn-intro {
        padding: 20px 12px;
        text-align: left;
        background-position: right 15px center;
        font-size: 15px;
    }


}


@media (max-width: 991px) {

    .left-side .btn-intro {
        right: -100px;
        top: -224px;
        position: absolute;
    }
    .right-side .btn-intro {
        right: 100px;
        top: -227px;
        position: absolute;
    }
    .btn-intro {
        padding: 20px 12px;
        text-align: left;
        background-position: right 15px center;
        font-size: 15px;
    }

    .logo-header { margin: 0px auto -78px -367px; }
    .logo-header { width: 795px; height: 225px; }

}


@media (min-width: 801px) and (max-width: 991px) {
    .right-side .btn-intro {
        right: 0px;
        bottom: 64px;
        width: 45%;
        top: initial;
        position: absolute;
    }
    .left-side .btn-intro {
        left: 0px;
        width: 45%;
        top: initial;
        bottom: -636px;
        position: absolute;
    }
    .btn-intro {
        padding: 20px 12px;
        text-align: left;
        background-position: right 15px center;
        font-size: 15px;
    }
    main {
        padding: 230px 0;
    }

}


@media (max-width: 800px) {
    .logo-header {
        height: 100px;
    }
    h1 {
        font-size: 24px;
        padding: 15px;
        margin-right: 15px;
    }
    .logo-header img {
        float: left;
        width: 60px;
    }
     .right-side .btn-intro {
        right: 0px;
        bottom: 45px;
        width: 100%;
        top: initial;
        position: absolute;
    }
    .left-side .btn-intro {
        left: 0px;
        width: 100%;
        top: initial;
        bottom: -415px;
        position: absolute;
        z-index: 99;
    }
    .btn-intro {
        padding: 20px 12px;
        text-align: left;
        background-position: right 15px center;
        font-size: 15px;
    }
    main {
        padding: 112px 0;
    }


}

@media (max-width: 767px) {

    .logo-header {
        height: 100px;
        width: 569px;
        margin: 1px auto 0px -269px;
    }

}


@media (max-width: 480px) {

    .logo-header {
         /* height: 100px; */
        width: 460px;
        margin: 1px auto 0px -216px;
    }

}

@media (max-width: 360px) {

    .logo-header {
        width: 360px;
        margin: 1px auto 0px -171px;
    }
}


/* ----------------------------------------------------------------
	Retina CSS
-----------------------------------------------------------------*/


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    #logo a.standard-logo { display: none; }
    #logo a.retina-logo { display: block; }

    .owl-carousel.owl-loading,
    .preloader,
    .preloader2,
    .form-process {
        background-image: url('../images/preloader@2x.gif');
        background-size: 24px 24px;
    }

    .dark .owl-carousel.owl-loading,
    .dark .preloader,
    .dark .preloader2,
    .dark .form-process { background-image: url('../images/preloader-dark@2x.gif'); }

    .widget_recent_comments li {
        background-image: url("../images/icons/widget-comment@2x.png");
        background-size: 15px 26px;
    }

    .widget_nav_menu li a,
    .widget_links li a,
    .widget_meta li a,
    .widget_archive li a,
    .widget_recent_entries li a,
    .widget_categories li a,
    .widget_pages li a,
    .widget_rss li a,
    .widget_recent_comments li a {
        background-image: url("../images/icons/widget-link@2x.png");
        background-size: 4px 20px;
    }

    .dark .widget_recent_comments li { background-image: url("../images/icons/widget-comment-dark@2x.png"); }

    .dark .widget_nav_menu li a,
    .dark .widget_links li a,
    .dark .widget_meta li a,
    .dark .widget_archive li a,
    .dark .widget_recent_entries li a,
    .dark .widget_categories li a,
    .dark .widget_pages li a,
    .dark .widget_rss li a,
    .dark .widget_recent_comments li a { background-image: url("../images/icons/widget-link-dark@2x.png"); }

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (   min--moz-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (max-width: 991px),
only screen and (        min-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (                min-resolution: 192dpi) and (max-width: 991px),
only screen and (                min-resolution: 2dppx) and (max-width: 991px) {
    #logo a.standard-logo { display: none; }
    #logo a.retina-logo { display: inline-block; }
}