body{
    color: #fff;
    font-family: 'Poiret One', cursive;
}
a{
    color: #fff;
}
a:hover,
a:focus,
a:active,
a:visited{
    text-decoration: none;
}
@media (max-width: 768px) {
    .my-MGTB300{
        margin: 100px auto;
        display: block;
    }
    .my-iconsMGTB{
        margin-top: 100xp;
        margin-bottom: 100px;
    }
    
    .my-mainImg{
    width: 200px;
    padding: 10px;
    border-radius: 50%;
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: relative;
    z-index: 999;
    animation: bounceIn 2s;
}
.my-mainImg:hover{
    background: rgba(0,0,0,0.7);
}
.my-leftBar{
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    top: 12%;
    left: 5%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInLeft 2s;
}
.my-leftBarText{
    position: absolute;
    top: 18%;
    left: 10%;
    animation: bounceInLeft 2s;
}
.my-rightBarText{
    position: absolute;
    bottom: 18%;
    right: 8%;
    animation: bounceInRight 2s;
}
.my-rightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: absolute;
    bottom: 12%;
    right: 5%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}
    
}
@media (min-width: 768px) {
    .my-MGTB300{
        margin: 300px auto;
        display: block;
    }
    
    .my-mainImg{
    width: 200px;
    padding: 10px;
    border-radius: 50%;
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: relative;
    z-index: 999;
    animation: bounceIn 2s;
}
.my-mainImg:hover{
    background: rgba(0,0,0,0.7);
}
.my-leftBar{
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    top: 35%;
    left: 25%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInLeft 2s;
}
.my-leftBarText{
    position: absolute;
    top: 36%;
    left: 28%;
    animation: bounceInLeft 2s;
}
.my-rightBarText{
    position: absolute;
    bottom: 36%;
    right: 27%;
    animation: bounceInRight 2s;
}
.my-rightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: absolute;
    bottom: 35%;
    right: 25%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}
}
@media (min-width: 1200px) {
    .my-MGTB300{
        margin: 300px auto;
        display: block;
    }
    
    .my-mainImg{
    width: 250px;
    padding: 10px;
    border-radius: 50%;
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: relative;
    z-index: 999;
    animation: bounceIn 2s;
}
.my-mainImg:hover{
    background: rgba(0,0,0,0.7);
}
.my-leftBar{
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    top: 35%;
    left: 25%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInLeft 2s;
}
.my-leftBarText{
    position: absolute;
    top: 36%;
    left: 30%;
    animation: bounceInLeft 2s;
}
.my-rightBarText{
    position: absolute;
    bottom: 36%;
    right: 30%;
    animation: bounceInRight 2s;
}
.my-rightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: absolute;
    bottom: 35%;
    right: 25%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}
    
}
.my-FSZ20{
    font-size: 20px;
}
.my-FSZ19{
    font-size: 19px;
}
.my-FSZ18{
    font-size: 18px;
}
.my-FSZ15{
    font-size: 15px;
}
.my-F25{
    font-size: 25px;
}
.my-F{
    font-size: 50px;
}
.my-bold{
    font-weight: bold;
}
.my-MGTB200{
    display: block;
    margin: 200px auto;
}
.my-H100{
    height: 100%;
}
.my-MGTB10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.my-PDTB0{
    padding-top: 0;
    padding-bottom: 0;
}
.my-MGTB20{
    margin-top: 20px;
    margin-bottom: 20px;
}
.my-MGTB{
    margin-top: 35%;
    margin-bottom: 35%;
}
.my-MGTB35{
    margin-top: 35px;
    margin-bottom: 35px;
}
.my-MGTB75{
    margin-top: 75px;
    margin-bottom: 75px;
}
.my-MGTB0{
    margin-top: 0;
    margin-bottom: 0;
}
.my-BDB{
    border-bottom: 1px solid #0f0f0f;
}
.my-LH1.5{
    line-height: 1;
}
.my-colorfff{
    color: #fff;
}
.my-color000{
    color: #000;
}
.my-color0070D2{
    color: #0070D2;
}
.my-colorF14F45{
    color: ;
}
/*----------------*/
/*     home       */
/*----------------*/
a.my-mainAnchor:hover{
    color: #fff;
}
.my-mainBg{
    background:url('../images/black_light_dark_figures_73356_1366x768.jpg') no-repeat center center fixed;
	position: absolute;
    top: 0;
    left: 0;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
    background-clip: border-box;
	min-height:100%;
	min-width:100%;
	background-repeat:no-repeat;
}

/*--//home--*/

/*----------------*/
/*     Menu       */
/*----------------*/
.my-menuItem{
    position: relative;
    padding: 35px;
    border-width: 10px;
    border-style: solid;
    border-image: 
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    border-radius: 50%;
}
a.my-menuAnchor:hover,
a.my-menuAnchor:visited,
a.my-menuAnchor:focus{
    color: rgba(255,255,255,0.7);
}
.my-borderBg{
    border-width: 10px;
    border-style: solid;
    border-image: 
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    border-radius: 50%;
    position: absolute;
    top:0;
    width: 150px;
    height: 150px;
}

.about{
    animation: bounceInLeft 2s;
}
.about a:hover{
    animation: zoomIn 3s;
}
.home{
    animation: bounceInDown 2s;
}
.home a:hover{
    animation: zoomIn 3s;
}
.design{
    animation: bounceInUp 2s;
}
.design a:hover{
    animation: zoomIn 3s;
}
.contact{
    animation: bounceInRight 2s;
}
.contact a:hover{
    animation: zoomIn 3s;
}
/*--//menu--*/

/*--------------------*/
/*       About        */
/*--------------------*/
.my-aboutMainImg{
    width: 125px;
    padding: 10px;
    border-radius: 50%;
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: relative;
    z-index: 999;
    animation: bounceIn 2s;
}
.my-aboutMainImg:hover{
    background: rgba(0,0,0,0.7);
}
.my-aboutLeftBar{
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    top: 35%;
    left: -40%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInLeft 2s;
}
.my-aboutLeftBarText{
    position: absolute;
    top: 40%;
    left: -20%;
    animation: bounceInLeft 2s;
}
.my-aboutRightBarText{
    position: absolute;
    bottom: 40%;
    right: -27%;
    animation: bounceInRight 2s;
}
.my-aboutRightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: absolute;
    bottom: 37%;
    right: -40%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}

.my-aboutMainRightBarText{
    position: absolute;
    top: 20%;
    left: 0;
    animation: bounceInRight 2s;
}
.my-aboutMainRightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: relative;
    left: -10%;;
    top: 25%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}
.my-aboutSubRightBarText{
    font-size: 14px;
    width: 750px;
    line-height: 1.5;
    position: absolute;
    top: 232.5%;
    left: -12.5%;
    animation: bounceInRight 2s;
}
.my-aboutSubRightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: absolute;
    top: 232.5%;
    left: -12.5%;
    width: 750px;
    height: 150px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}
.my-logo{
    width: 75px;
}
/*--//about--*/

/*--------------------*/
/*      Design        */
/*--------------------*/

.my-designImg{
    width: 250px;
}

/*--//design--*/
/*--------------------*/
/*       Modal        */
/*--------------------*/

.my-modalHeadFont{
    font-size: 20px;
    color: #F14F45;
    font-weight: bold;
}
.my-modalFont{
    color: #0a0a0a;
    font-weight: bold;
    padding-bottom: 10px;
}
.my-modalMainImg{
    width: 125px;
    padding: 10px;
    border-radius: 50%;
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: relative;
    z-index: 999;
    animation: bounceIn 2s;
}
.my-modalMainImg:hover{
    background: rgba(0,0,0,0.7);
}
.my-modalLeftBar{
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43 , #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left,#F45C43  , #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    top: 30%;
    left: 20%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInLeft 2s;
}
.my-modalLeftBarText{
    position: absolute;
    top: 36%;
    left: 30%;
    animation: bounceInLeft 2s;
}
.my-modalRightBarText{
    position: absolute;
    bottom: 36%;
    right: 30%;
    animation: bounceInRight 2s;
}
.my-modalRightBar{

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    position: absolute;
    bottom: 30%;
    right: 20%;
    width: 250px;
    padding: 25px;
    transform: skewX(20deg);
    animation: bounceInRight 2s;
}
.my-modalBTN{
    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #EB3349 , #F45C43); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #EB3349 , #F45C43); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    font-weight: bold;
}
.modal-footer a{
    animation: none;
}
/*--//modal--*/

/*---classic---*/
.my-classicBg{
    background: rgba(0,0,0,0.7);
    box-shadow: 0px 0px 80px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 80px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 80px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    right: 0;
}
.my-classicLink{
    padding: 5px 15px;
}
.my-classicImg{
    width: 25px;
}
/*---//classic---*/

/*---visitors---*/
.my-visit{
    position: fixed;
    left: 0px;
    bottom: 0px;
    -webkit-animation: pop 4s 1;  /* Chrome, Safari, Opera */
    -webkit-animation-timing-function: linear;  /* Chrome, Safari, Opera */
    animation: pop 4s 1;
    animation-timing-function: ease;
}
.my-btn{
    background: rgba(0,0,0,0.8);
    border-radius: 0;
    box-shadow: 0px 0px 80px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 80px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 80px rgba(0,0,0,0.1);
    color: #fff;
}
.my-visitImg{
    width: 25px;
}
/*---//visitors---*/
/*--------------------*/
/*    animations      */
/*--------------------*/
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-350px, 0, 0);
    transform: translate3d(-350px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(350px, 0, 0);
    transform: translate3d(350px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.my-footer{
    background: rgba(0,0,0,0.7);
    padding: 10px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    animation: flipInX 2s;
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

/*--//animation--*/