@font-face {
	font-family:'NotoSans';
	src: url("../fonts/NotoSans-ExtraLight.woff2"), url("../fonts/NotoSans-ExtraLight.woff");
	font-weight:200;
	font-display:swap;
	font-style:normal;
}

@font-face {
	font-family:'NotoSans';
	src: url("../fonts/NotoSans-Regular.woff2"), url("../fonts/NotoSans-Regular.woff");
	font-weight:400;
	font-display:swap;
	font-style:normal;
}

@font-face {
	font-family:'NotoSans';
	src: url("../fonts/NotoSans-Bold.woff2"), url("../fonts/NotoSans-Bold.woff");
	font-weight:700;
	font-display:swap;
	font-style:normal;
}

body {
    font-size: 15px!important;
    font-family: 'NotoSans', sans-serif!important;
    margin: 0;
    padding: 0;
    position: relative;
    background: #f6f6f6;
    color: #000;
    overflow-x: hidden;
    background: #353535;
}

.wrapper {
    min-height: 100vh;
}

.container {
    box-shadow: 0 0 30px rgba(0, 0, 0, .3);
    margin: 18px;
    border-radius: 18px;
    padding: 0 10px;
    max-height: 100vh;
    position: relative;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    background: purple;
    z-index: 2;
    color: #fff;
}

.container a {
    color: #fefefe;
    transition: all .3s;
}

.container a:hover {
    color: teal;
    transition: all .3s;
}

.ovrflw-hdn {
    overflow: hidden;
}

.fg-1 {
    flex-grow: 1;
}

.bs-block {
    display: flex;
    flex-wrap: wrap;
}

.bs-block-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.w100pr {
    width: 100%;
}

.t-a-c {
    text-align: center;
}

.f-w-b {
    font-weight: bold;
}

.txt-upper {
    text-transform: uppercase;
}

.j-c-a {
    justify-content: space-around;
}

.a-s-e {
    align-self: flex-end;
}

.a-s-s {
    align-self: flex-start;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.header-txt {
    margin-top: 15px;
    position:relative;
    z-index: 2;
}

.main-page__contact-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    width: 40%;
}

.msngr-icon {
    opacity: .7;
    transition: all .3s;
}

.msngr-icon:hover {
    opacity: 1;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.link-to-main-site {
    margin-bottom: 15px;
}

@media only screen and (max-width: 992px) {
    .main-page__contact-box {
        grid-template-columns: repeat(2, 1fr);
        width: 80%;
    }
}


@media only screen and (max-width: 768px) {

    @keyframes bg-change-size-1 {   
        0% {
            width: 0;
            height: 0;
            opacity: 1;
        }
        
        75% {
            opacity: .1;
        } 
    
        100% {
            border: solid pink 70vh;
            width: 150vh;
            height: 150vh;
            opacity: 0;
        }
    }

    @keyframes bg-change-size-2 {   
        0% {
            width: 0;
            height: 0;
            opacity: 1;
        }
        
        75% {
            opacity: .1;
        }         
    
        100% {
            border: solid lightblue 70vh;
            width: 150vh;
            height: 150vh;
            opacity: 0;
        }
    }

    @keyframes bg-change-size-3 {   
        0% {
            width: 0;
            height: 0;
            opacity: 1;
        } 

        75% {
            opacity: .1;
        }         
    
        100% {
            border: solid lightgreen 70vh;
            width: 150vh;
            height: 150vh;
            opacity: 0;
        }
    }

    @keyframes bg-change-size-4 {   
        0% {
            width: 0;
            height: 0;
            opacity: 1;
        }
        
        75% {
            opacity: .1;
        }         
    
        100% {
            border: solid limegreen 70vh;
            width: 150vh;
            height: 150vh;
            opacity: 0;
        }
    }
    
}


.the-circle-1 {
    position: absolute;
    content: '';
    left: -50vw;
    bottom: -50vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: solid pink 5vw;
    animation: bg-change-size-1 12s ease-in-out infinite;
    -webkit-animation: bg-change-size-1 12s ease-in-out infinite;
    z-index: -1;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}


.the-circle-2 {
    position: absolute;
    content: '';
    right: -50vw;
    top: -50vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: solid lightblue 5vw;
    animation: bg-change-size-2 12s ease-in-out 1s infinite;
    -webkit-animation: bg-change-size-2 12s ease-in-out 1s infinite;
    z-index: -1;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

.the-circle-3 {
    position: absolute;
    content: '';
    left: -50vw;
    top: -50vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: solid lightgreen 5vw;
    animation: bg-change-size-3 12s ease-in-out 2s infinite;
    -webkit-animation: bg-change-size-3 12s ease-in-out 2s infinite;
    z-index: -1;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

.the-circle-4 {
    position: absolute;
    content: '';
    right: -50vw;
    bottom: -50vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: solid limegreen 5vw;
    animation: bg-change-size-3 12s ease-in-out 3s infinite;
    -webkit-animation: bg-change-size-3 12s ease-in-out 3s infinite;
    z-index: -1;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}


@keyframes bg-change-size-1 {   
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    
    75% {
        opacity: .1;
    }
   
    100% {
        border: solid pink 40vw;
        width: 150vw;
        height: 150vw;
        opacity: 0;
    }
}

@keyframes bg-change-size-2 {   
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    } 

    75% {
        opacity: .1;
    }
   
    100% {
        border: solid lightblue 40vw;
        width: 150vw;
        height: 150vw;
        opacity: 0;
    }
}

@keyframes bg-change-size-3 {   
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    
    75% {
        opacity: .1;
    } 
   
    100% {
        border: solid lightgreen 40vw;
        width: 150vw;
        height: 150vw;
        opacity: 0;
    }
}

@keyframes bg-change-size-4 {   
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    
    75% {
        opacity: .1;
    }  
   
    100% {
        border: solid limegreen 40vw;
        width: 150vw;
        height: 150vw;
        opacity: 0;
    }
}