* {
    box-sizing: border-box
}

body {
    font-family: 'Alex Brush', sans-serif;
}

#onMobile {
    display: none;
}

#onMobileButtonCurse {
    display: none;
}

#onMobileCall {
    display: none;
}

#onMobileText {
    display: none;
}

#onMobileMoto {
    display: none;
}

#footerImg {
    top: 30%;
}

.image-block {
    top:90%;
}

#navbarColor {
border-color: #f8f9fa;
background-color: #f8f9fa;
}


#orange {
    background-color: #FFFFFF;
    border-color: #ffffff;
    color: black;
}

.orangeText {
    color: #e46f06;
}

#yButtonWave {
   color: #04ff00;
}

#collapseExample {
    position: fixed;
    width: 100%;
    z-index: 3000;
    background-color: white;
}

.header {
    text-align: center;
    background-size: cover;
    padding-bottom: 32px;
}

.btn-outline-warning {
    color: #e46f06;
    border: #e46f06;
    font-size: 19px;
}

.newsButton {
    background: #e46f06;
    border: #e46f06;
}

#oplata {
    color: #e46f06;
}

#onDesctop {
    color: #e46f06;
}

.header h1 {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    font-size: 40px;
}

.hero-image {
    height: 25%;
    width: 100%;
    position: relative;
}

.h2_center {
    text-align: center;
    color: #e46f06;
}

.h2_center_black {
    text-align: center;
    color: #000000;
}

.col-sm-4 img {
    transition: 1 sec ease;
    transform: scale(1);
}

.col-sm-4:hover img {
    transform: scale(1.05);
}

.col-sm-6 {
        padding-top: 0px;
        padding-bottom: 15px;
    }
    
    .myButton {
 background-color:#e97714;
 border-radius:10px;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size:16px;
 padding:32px 76px;
 text-decoration:none;
}
.myButton:hover {
 background-color:#e97714;
}
.myButton:active {
 position:relative;
 top:1px;
}

.navigation a {
    float: left;
    display: block;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 17px;
    width: 25%;
    text-align: center;
}

.navigation a:hover {
    background-color: #000;
}

.navigation a.active {
    background-color: #4CAF50;
}

.container {
    padding-bottom: 16px;
}

.column {
    float: left;
    width: 30%;
    position: relative;
    text-align: center;
    color: white;
    padding: 10px;
    height: 300px;
    margin: 30px 30px 1px;
}

.text-block {
    position: absolute;
    top: 58%;
    left: 26%;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.column-66 {
    float: left;
    width: 66.66666%;
    padding: 20px;
}

.column-33 {
    float: left;
    width: 33.33333%;
    padding: 20px;
}

.large-font {
    font-size: 44px;
}

.large-font-extreme {
    font-size: 43px;
}

.xlarge-font {
    font-size: 64px
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-size: 100%, 100%;
    border-radius: 50%;
    background-image: none;
}

.carousel-control-next-icon:after
{
    content: '>';
    font-size: 55px;
    color: #000000;
}

.carousel-control-prev-icon:after {
    content: '<';
    font-size: 55px;
    color: #000000;
}

.column_avatar {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
}

.card_avatar {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container_avatar {
    padding: 0 16px;
}

.container_avatar::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.title_avatar {
    color: grey;
}

.button_avatar {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.button_avatar:hover {
    background-color: #555;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

footer {
    background: #16222A;
    background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
    background: linear-gradient(59deg, #3A6073, #16222A);
    color: white;
    margin-top: 100px;
}

footer a {
    color: #fff;
    font-size: 14px;
    transition-duration: 0.2s;
}

footer a:hover {
    color: #FA944B;
    text-decoration: none;
}

.copy {
    font-size: 12px;
    padding: 10px;
    border-top: 1px solid #FFFFFF;
}

.footer-middle {
    padding-top: 2em;
    color: white;
}

ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}

ul.social-network li {
    display: inline;
    margin: 0 5px;
}

.social-network a.icoFacebook {
    background-color: #3B5998;
}

.social-network a.icoInstagram {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );

}

.social-network a.icoYouTube {
    background-color: #c4302b;
}

.social-network a.icoViber {
    background-color: #665CAC;
}

.social-network a.icoTelegram {
    background-color: #0088cc;
}

.social-network a.icoFacebook i,
.social-network a.icoInstagram i,
.social-network a.icoYouTube i,
.social-network a.icoTelegram i,
.social-network a.icoViber i {
    color: #fff;
}

.social-network a.socialIcon:hover,
.socialHoverClass {
    color: #44BCDD;
}

.social-circle li a {
    display: inline-block;
    position: relative;
    margin: 0 auto 0 auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.social-circle li i {
    margin: 0;
    line-height: 30px;
    text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms--transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}

.social-circle i {
    color: #595959;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}

.social-network a {
    background-color: #F9F9F9;
}

#logo2 {
    width: 120px;
    height: 30px;
}

@media screen and (max-width: 500px) {
    
    #zagolovok {
        font-size: 20px;
    }
    
    #mezhdystrok p {
        margin-bottom: 0.5rem;
    }
    
    #youTubeVideo {
        width: 320px;
    }

    .ul_font {
        font-size: 20px;
    }

    .large-font {
        text-align: center;
        font-size: 30px;
    }

    #onMobile {
        display: block;
    }

    #onMobileVideo {
        width: 315px;
        height: 200px;
    }

    #logo {
        width: 120px;
        height: 42px;
    }

    #onMobileCall {
        display: block;
    }

    #onMobileCall img {
        display: block;
        height: 25px;
        max-width: 100%;
    }

    #onMobileButtonCurse {
        display: block;
    }

    #onMobileText {
        display: block;
    }

    #onDesctop {
        align-content: center;
        display: none;
    }

    #onDesctop2 {
        align-content: center;
        display: none;
    }

    #onMobileMoto {
        display: block;
    }
    
     #onMobilePadding {
        padding-bottom: 0px;
    }

    .column-66,
    .column-33 {
        width: 100%;
        text-align: center;
    }

    .navigation a {
        float: none;
        display: block;
        width: 100%;
        text-align: left;
    }

    .column {
        width: 100%;
        display: block;
    }

    .no-mobile {
        display: none;
    }

    .col-sm-4 {
        padding-bottom: 15px;
    }
    
     .col-sm-6 {
        padding-bottom: 15px;
    }

    .col-md-3 {
        padding-bottom: 5px;
    }

    .large-font-extreme {
        font-size: 40px;
    }

    .carousel-control-next-icon:after {
        font-size: 30px;
    }

    .carousel-control-prev-icon:after {
        font-size: 30px;
    }

    img {
        margin: auto;
    }
}