﻿
@font-face {
    font-family: 'icomoon';
    src: url('/fonts/icomoon.eot?5kiojs');
    src: url('/fonts/icomoon.eot?5kiojs#iefix') format('embedded-opentype'), url('/fonts/icomoon.ttf?5kiojs') format('truetype'), url('/fonts/icomoon.woff?5kiojs') format('woff'), url('/fonts/icomoon.svg?5kiojs#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.instagram2 {
    background: #5851db;
    background: -moz-linear-gradient(45deg,#df6231,#d11f41,#be2591);
    background: -webkit-linear-gradient( 45deg,#df6231,#d11f41,#be2591);
    background: linear-gradient( 45deg,#df6231,#d11f41,#be2591);
}

.linkedin2 {
    background: #352c65;
    background: -moz-linear-gradient(0deg,#352c65 0%,#00a9ce 100%);
    background: -webkit-linear-gradient( 0deg,#352c65 0%,#00a9ce 100%);
    background: linear-gradient( 0deg,#352c65 0%,#00a9ce 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#352c65",endColorstr="#00a9ce",GradientType=1);
}

.facebook2 {
    background-color: #2b4170;
    background: -moz-linear-gradient(top,#3b5998,#2b4170);
    background: -ms-linear-gradient(top,#3b5998,#2b4170);
    background: -webkit-linear-gradient(top,#3b5998,#2b4170);
}

.telegram2 {
    background: #237aa4;
    background: -moz-linear-gradient(0deg,#157ce1 0%,#2a9ef1 100%);
    background: -webkit-linear-gradient( 0deg,#157ce1 0%,#2a9ef1 100%);
    background: linear-gradient( 0deg,#157ce1 0%,#2a9ef1 100%);
}


.aparat2 {
    background: #dd1456;
    background: -moz-linear-gradient(0deg,#dd1456 0%,#ed145b 100%);
    background: -webkit-linear-gradient( 0deg,#dd1456 0%,#ed145b 100%);
    background: linear-gradient( 0deg,#dd1456 0%,#ed145b 100%);
}

.youtub2 {
    background: #F00;
    background: -moz-linear-gradient(0deg,#c00 10%,#f00 100%,#ff4e45 100%);
    background: -webkit-linear-gradient(0deg,#c00 10%,#f00 100%,#ff4e45 100%);
    background: linear-gradient(0deg,#c00 10%,#f00 100%,#ff4e45 100%);
}


.tumblr {
    background: #zca4df;
    background: -moz-linear-gradient(0deg,#7ca4df 0%,#16205e 100%);
    background: -webkit-linear-gradient(0deg,#7ca4df 0%,#16205e 100%);
    background: linear-gradient(0deg,#7ca4df 0%,#16205e 100%);
}

.twitter2 {
    border-radius: 7px;
    background: #237aa4;
    background: -moz-linear-gradient(0deg,#237aa4 0%,#2ca5e0 100%);
    background: -webkit-linear-gradient( 0deg,#237aa4 0%,#2ca5e0 100%);
    background: linear-gradient( 0deg,#237aa4 0%,#2ca5e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#237aa4",endColorstr="#2ca5e0",GradientType=1);
    padding: 10px;
    color: #fff;
    overflow: hidden;
}
/*.page__content .socials .social {
    border-radius: 7px;
    background: #237aa4;
    background: -moz-linear-gradient(0deg,#237aa4 0%,#2ca5e0 100%);
    background: -webkit-linear-gradient(
0deg,#237aa4 0%,#2ca5e0 100%);
    background: linear-gradient(
0deg,#237aa4 0%,#2ca5e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#237aa4",endColorstr="#2ca5e0",GradientType=1);
    padding: 10px;
    color: #fff;
    overflow: hidden;
}*/


.socials {
    border-radius: 7px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#237aa4",endColorstr="#2ca5e0",GradientType=1);
    padding: 10px;
    color: #fff;
    overflow: hidden;
    /*background: #0b87c3;
            background: -moz-linear-gradient(0deg,#237aa4 0%,#2ca5e0 100%);
            background: -webkit-linear-gradient(0deg,#237aa4 0%,#2ca5e0 100%);
            background: linear-gradient(0deg,#237aa4 0%,#2ca5e0 100%);*/
}


.social__thumb i {
    font-size: 90px;
    display: block;
    padding-right: 6px;
    z-index: 99;
    position: relative;
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    transition: 0.3s;
}

*, *::before, *::after {
    box-sizing: border-box;
}



.social__thumb {
    position: relative;
    margin-bottom: 45px
}

.socials .social__thumb i {
    font-size: 90px;
    display: block;
    padding-right: 6px;
    z-index: 99;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: 0.3s
}

.socials .social__thumb:before {
    content: "";
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #fff;
    opacity: .2;
    position: absolute;
    top: -70px;
    right: -50px;
    transition: 0.3s
}

.socials .social__thumb:after {
    content: "";
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #fff;
    opacity: .3;
    position: absolute;
    top: -80px;
    right: -45px;
    transition: 0.3s
}

.socials .social__title {
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    margin-bottom: 3px;
    word-spacing: -3px
}

.socials .social__sub-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2)
}

.socials .social__more {
    background: #fff;
    color: #237aa4;
    display: block;
    border-radius: 4px;
    padding: 15px 3px;
    font-weight: 700;
    text-align: center;
    margin: 8px;
}

.socials .social:hover i {
    color: #131313;
    opacity: .5
}

.socials .socials:hover .social__thumb:before {
    top: -70px;
    right: -50px
}

.socials .socials:hover .social__thumb:after {
    top: -80px;
    right: -59px
}

.socials:hover .social__thumb:before {
    top: -70px;
    right: -50px
}

.socials:hover .social__thumb:after {
    top: -80px;
    right: -59px
}

.social__thumb:hover i {
    color: #131313;
    opacity: .5;
}

.social__thumb:hover img {
    color: #131313;
    opacity: .5;
}



.hcs {
    /*background: #dde1e5;*/
    padding: 32px;
    margin-top: 100px;
    color: #041940;
    font-size: 20px;
}

.pcs {
    text-align: center;
    font-size: 19px;
    line-height: 50px;
    padding: 50px 0;
}

.art {

margin-bottom:10px;
max-height:300px;
height:300px;
width:25%;

}


@media screen and (max-width:1500px) {
    .art {
        width: 25%;
    }
}
@media screen and (max-width:1200px) {
    .art {
        width: 33%;
    }
}
@media screen and (max-width:700px) {
    .art {
        width: 50%;
    }
}