@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:600|Noto+Sans+JP|Open+Sans:600|Taviraj:300&display=swap');
/*start reset*/
*{
    border:0;
    padding: 0;
    margin:0;
    outline: none;
    text-decoration:none;
    list-style:none;
    font-size: 14px;
    color: #000; 
}

@media only screen and (min-width : 900px) {
    *{  cursor: none;  }
}
/*html {
    position:relative;
    top:0;
    left: 0;
    width: 100%;
    height:100%; 
    background: #fff;
}*/
input:focus{
    outline:none;
}
textarea:focus{
    outline:none;
}
/*end rest html*/
body{
    margin: 0 auto;
    max-width: 1920px;
    max-height: 1080px;
    position:relative;
    top:0;
    left: 0;
    width: 100%;
    height:100%; 
    overflow-x:hidden;
    overflow-y: auto;
    /*transition: overflow  .8s ease-in-out;*/  
}
h1{
    font-family: 'Taviraj', serif;
}
h2, h3, h4, h5, h6{
    font-family: 'Noto Sans JP', sans-serif;
}
p{
    line-height: 1.4em;
    font-family: 'Noto Sans JP', sans-serif;
}
form, li, a{

    font-family: 'Open Sans', sans-serif;
}
/*start header*/
header{
    display: block;
    z-index:5;
    position:fixed;
    top:2em;
    left: 0;
    width: auto;
    height:auto;

    overflow:hidden; 
    text-align: center;
    padding-left: 1em; 

} 
.nav{
    margin: 0 auto;
    display: inline-block;
    position:relative;    
}
.nav ul{  
    text-align: left;   
}
.nav li{
    position:relative;
    right:0;
    top:0;
    width: auto;
    height: auto;

    display: block; 
    margin: 3px;
    overflow: hidden;

}
.nav li a{
    width: auto; 

    letter-spacing: 2px; 
    overflow: hidden;  
    font-size:.8em;
    color: #000; 
    font-weight: 900;

    padding-left: 1em;
    padding: 2em;
}
.nav li a div{
    overflow: hidden;
    position:absolute;
    left:-70%;
    top: 0;
    width: 70%;
    height: 100%;
    background-image: url(../imgs/tiltdigitalstudio_line.png);
    background-repeat: no-repeat;
    background-size: 100% 95%;

    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
}
.nav li:hover a div{
    left: 0;

    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out;
}
.nav .nav-on  div{


    left: 0;
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 

}
.nav .nav-off  div{
    left: -70%;
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out;
}
.serv--nav{
    margin: 0 auto;
    display: inline-block;
    position:relative;    
}
.serv--nav ul{  
    text-align: left;   
}
.serv--nav li{
    position:relative;
    right:0;
    top:0;
    width: auto;
    height: auto;

    display: block; 
    margin: 3px;
    overflow: hidden;
}
.serv--nav li a{
    width: auto; 

    letter-spacing: 2px; 
    overflow: hidden;  
    font-size:.8em;
    color: #000; 
    font-weight: 900;

    padding-left: 1em;
    padding: 2em;
}
.serv--nav li a div{
    overflow: hidden;
    position:absolute;
    left:-70%;
    top: 0;
    width: 70%;
    height: 100%;
    background-image: url(../imgs/tiltdigitalstudio_line.png);
    background-repeat: no-repeat;
    background-size: 100% 95%;

    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
}
.serv--nav li:hover a div{
    left: 0;

    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out;
}
.serv--nav .nav-on  div{


    left: 0;
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 

}
.serv--nav .nav-off  div{
    left: -70%;
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out;

}


#nav-logo{
    z-index: 500;
    position: fixed;
    top: 1em;
    left: calc(50% - 5em);
    width: 10em;
    height: 10em; -webkit-transition: all .8s ease-in-out; 
    -moz-transition: all .8s ease-in-out; 
    -o-transition: all .8s ease-in-out; 
    transition: all .8s ease-in-out; 
}
.nav-logoOn {

    background-image: url(../images/wtiltdigitalstudiologo.png);
    background-size: 100% 100%;
    -webkit-transition: all .6s ease-in-out; 
    -moz-transition: all .6s ease-in-out; 
    -o-transition: all .6s ease-in-out; 
    transition: all .6s ease-in-out; 
}

.nav-logoOff {

    background-image: url(../images/tiltdigitalstudiologo.png);
    background-size: 100% 100%;
    -webkit-transition: all .8s ease-in-out; 
    -moz-transition: all .8s ease-in-out; 
    -o-transition: all .8s ease-in-out; 
    transition: all .8s ease-in-out; 
}
.mn--nav{
    display: none;
    z-index: 499;
    position: fixed;
    top: 2.2em;
    right: 4em;
    width: 2em;
    height: 2em;
    background-color: #e01d44;
}
.Amn--nav{ 
    position: relative;
    top: 0;
    left: -20%; 
    width: 100%;
    height: 4px;
    background-color: black;
    margin: .3em auto;
    transition: all 0.2s ease-in-out;
}
.btnOn .Amn--nav:nth-child(2){
    left: 10%;
}
.btnOff .Amn--nav:nth-child(2){
    left: -40%; 
}
.mn--nav:hover .Amn--nav{ 
    transition: all 0.2s ease-in-out;
    left: -10%; 
}
/*start mouse*/
#cursor{
    display: block;
    overflow: hidden;
    z-index: 500;
    position: fixed;
    top:30px;
    left: 10px;
    width:10px;
    height: 10px;
    border: #000 1px solid;
    border-radius: 50%; 
    transition: all 200ms ease-out;

    pointer-events: none;
    animation: curAn .8s infinite alternate;
}
#c--circle{
    display: block;
    overflow: hidden;
    z-index: 500;
    position: fixed; 
    top:30px;
    left: 10px;
    width:2px;
    height: 2px;
    background-color: #000;

    pointer-events: none;
    transition: all 100ms ease-out;
    animation: curAn .8s infinite alternate;
}
/*end mouse*/
@media only screen and (max-width : 1023px) {
    header .nav{
        display: none;
    }
    .mn--nav{
        display: block;
    }
    #nav-logo{    
        left: calc(50% - 4em);
        width: 8em;
        height: 8em;  
    }
}
@media only screen and (max-width : 900px) {
    #cursor{
        display: none;
    }
    #c--circle{
        display: none;
    }
    header{
        top:4em;

    }
    #nav-logo{  
        left: calc(50% - 3.5em);
        width: 7em;
        height: 7em;  
    }
    .mn--nav{ 
        top: 2.2em;
        right: 2em; 
    }
}
@media only screen and (max-width : 600px) { 
    header{
        top:8em;

    }
    #nav-logo{  
        left: calc(50% - 3em);
        width: 6em;
        height: 6em;  
    }
}
/*start navigation*/
.A--navigation{ 
    z-index: 498;
    position:fixed; 
    top:-100%; 
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #241663; 
}
.mainNav{ 
    z-index: 498; 
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: #241663; 
}
.navig ul{
    position: absolute;
    top:50%;
    left: 20%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
}
.navig  li{
    position:relative;
    right:0;
    top:0;
    width: auto;
    height: auto;

    display: block; 
    margin: 1.4em;
    overflow: hidden;
}
.navig  li a{
    width: auto; 
    letter-spacing: 2px; 
    overflow: hidden;  
    font-size:1.2em;
    color: #fff; 
    font-weight: 900;

    padding-left: 1em;
    padding: 2em;
}
.navig  li a div{
    overflow: hidden;
    position:absolute;
    left:-70%;
    top: 0;
    width: 70%;
    height: 100%;
    background-image: url(../imgs/wtiltdigitalstudio_line.png);
    background-repeat: no-repeat;
    background-size: 100% 95%;

    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
}
.navig  li:hover a div{
    left: 0;

    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out;
}
.navig  .navig-on  div{
    left: 0;
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
}
.navig  .navig-off  div{
    left: -70%;
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out;
}
@media only screen and (max-width : 1023px) {
    .navig ul{
        left: 18%;
    }
}
@media only screen and (max-width : 900px) {
    .navig ul{
        left: 14%;
    }
    .navig  li{ 
        margin: 1em;
    }
}
@media only screen and (max-width : 600px) {
    .navig ul{
        left: 5%;
    }
    .navig  li{ 
        margin: .8em;
    }
}
@media only screen and (max-width : 400px) {
    .navig ul{
        left: 5%;
    }
}
/*start body*/
.main-Cont{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    text-align: left; 
    overflow: hidden;
}

.title--bar{

    left: 0;
    width: 50%; 
    margin-top: 12em;
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    border-bottom: 1.6PX solid #000;
}

.title--bar h1{
    font-family: 'Cormorant Garamond', serif;
    text-align: right;
    font-size: 2.2em;
    letter-spacing: 6px;
}
.othr {left: 50%;}
.othr h1{ text-align:left;}
.title--info{ 

    margin-top: 2em;
    position: relative;
    top: 0;
    left: 20%;
    width: 50%;
}
.title--info h1{
    margin: -.8em;
    letter-spacing: -.05em;
    font-size: 4em;
}
.title--info p{

    margin: .4em;
    margin-top: 1.1em;
    margin-left: -1.8em;
    letter-spacing: -.05em;
    font-size: 1.6em;
}

.infoComp, .infoStrategy, .infoKontact {
    left: 50%;
    width: 50%;
}
/*start cover page*/
.coverContent img{
    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
    position:relative;
    top: 0;
    left: 0;
    width: 50%;
    height:100%;
    margin-left: 10%;
}
.cover--support{

    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    width: 26em;
    height: auto; 
    text-align: left;
    padding: .6em; 
}
.cover--support p{ font-size: 1.2em;}
.cover--support p:nth-child(1){ font-size: 1.6em;}
.cover--support p:nth-child(2){ font-size: 1.6em;}
.cover--support p:nth-child(3){   margin-top: .3em;}

.side--cover--img{
    position: absolute;
    top: 14em;
    right: 0;
    width: 12em;
    height: auto;
}
.side--cover--img img{
    width: 100%;
    height: 100%;
}

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

    .title--bar{
        margin-top: 16em; 
        border-bottom: 1.4px solid #000;
    }
    .title--bar h1{  
        font-size: 1.8em; 
    }

    .title--info{ 

        left: 14%;
    }
    .title--info h1{ 
        font-size: 3.2em;
    }
    .title--info p{

        font-size: 1.4em;
    }

    .othr {left: 45%; width: 55%;}
    .infoComp, .infoStrategy, .infoKontact {
        left: 48.5%;
        width: 51.5%;
    }
    .coverContent img{ 
        width: 32em; 

        margin-left: 5%;
    }
    .cover--support p{ font-size: 1.2em;}
    .cover--support p:nth-child(1){ font-size: 1.2em;}
    .cover--support p:nth-child(2){ font-size: 1.2em; }
    .cover--support p:nth-child(3){   margin-top: .3em;}
    .side--cover--img{
        position: absolute;
        top: 8em;
        right: 0;
        width: 10em;} 
}

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

    .title--bar{ 
        width: 70%;
    }
    .title--info{ 

        left: 20%;
        width: 70%;
    }
    .coverContent img{ 
        width: 100%; 

        margin: 0;
    }
    .cover--support{
        width: 70%;
    }

    .othr {left: 20%; width: 80%;}
    .infoComp, .infoStrategy, .infoKontact {
        left: 25%;
        width: 75%;
    }
}
@media only screen and (max-width : 600px) {

    .title--info h1{ 
        font-size: 2.6em;
    }
    .title--info p{

        font-size: 1.2em;
    }

    .cover--support{
        margin: 0 auto;
        width: 88%;

        padding: 2em;
    }
    .resize-tilte{

        margin-top: 7em;
    }

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

    .title--info h1{ 
        font-size: 2em;
    }
    .title--info p{

        font-size: 1.2em;
    }
}
@media only screen and (max-width : 320px) {}


/*start company page*/
.contentComp{
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    z-index: 5;
    position: relative;
    /*top: 32em;*/
    left: 10%;
    width: 32em;
    height: auto;
    margin-top: 2em;
    margin-bottom: 18em;
}
.contentComp  p{
    font-size: 1.8em;
    font-weight: 100;
}
.compContent{
    z-index: -1;
    overflow: hidden;
    display: inline-block;
    z-index: 5;
    position: absolute;
    top: 28em;
    right: 0;
    width: calc(90% - 5em);
    height: calc(100% - 26em);
}
.compContent img:nth-child(1){
    overflow: hidden;
    display: inline-block;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 35em);
    height:auto;
} 
.compContent img:nth-child(2){
    z-index: 5;
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 25%;
    height:auto; 
    margin: 1.2em;
    display: block;;
}
@media only screen and (max-width : 1023px) {
    .contentComp{ 
        left: 5%;
        width: 30em; 
        margin-top: 2em;
        margin-bottom: 18em;
    }
    .contentComp  p{
        font-size: 1.4em;
    }
    .compContent{   
        width: calc(90% - 5em);
        height: calc(100% - 30em);

    }
    .compContent img:nth-child(1){
        width: calc(100% - 25em);
        height:auto;
    }
}
@media only screen and (max-width : 900px) {
    .contentComp{ 
        left: 4%;
        width: 26em;  
        margin-bottom: 14em;
    }
    .contentComp  p{
        font-size: 1.2em;
    }
    .compContent{   
        width: calc(90% - 5em);
        height: calc(100% - 30em);    
    }
    .compContent img:nth-child(1){
        width: calc(100% - 20em);
        height:auto;
    }
}
@media only screen and (max-width : 600px) {
    .contentComp{  
        display: inline-block; 
        position: relative; 
        left: 0;
        width: 100%;
        height: auto; 
        margin: 2em auto;
        text-align: center;
    }
    .contentComp  p{
        margin: 0 auto;
        width: 90%;
        font-size: 1.1em;
        text-align: left;
    }
    .compContent img:nth-child(2){
        display: none;
    }
    .compContent{ 
        margin: 0;
        display: inline-block; 
        position:relative;
        top: 0;
        right: 0;
        width: 100%;
        height: auto;

    }
    .compContent img:nth-child(1){
        overflow: hidden;
        display: inline-block;
        float: none;
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        height:auto;
    }
} 
/*start services page*/
.ServContent {
    margin-top: 2em;
    position: relative;
    bottom: 0;
    left: 0; 
    width: 100%;
    height:auto;
    text-align: center;
    display: inline-block;  
    padding-bottom: 18em;
}
.ServContent div{ 
    width: auto;
    height:auto; 
    display: inline-block;  
}
.ServContent div h1{
    text-align: left;
    font-weight: 700;
    font-size: 2.4em;
}
.ServContent div h2{
    text-align: left;
    font-weight: 300;
    font-size: 1.6em;
}
.ServContent div p{
    text-align: left;
    font-weight: 300;
    font-size: 1.6em;
}
.ServContent div:nth-child(1){
    position: absolute;
    bottom: 2em;
    left: 10%;
    width: auto;
    height:auto;
    margin: 0;
}
.ServContent div:nth-child(2), .ServContent div:nth-child(3){
    position: relative;
    bottom: 0;
    left: 8%;
    width: auto;
    margin: 1em;
    margin-left: 8em;
}
.dled--list{
    position: relative;
    top:0;
    right: 10%;
    width: auto;
    height:auto;
    float: right;
}
.dled--list a{  
    background-color:#241663;
    padding: .3em;
    color: #fff;
    transition: all 0.2s ease-in-out;
}
.dled--list a:hover{  
    background: #e01d44;
    transition: all 0.2s ease-in-out;
}
.serv--A{
    position: absolute;
    top: 4em;
    right: 0;
    width: 30em;
    height: auto; 

    display: block;
}
.serv--B{
    position: absolute;
    top: 40em;
    left: 0;
    width: 16em;
    height: auto; 

    display: block;
}
.servImg img{
    width: 100%;
    height: 100%;
}
.contentServ{
    position: absolute;
    bottom: 2em;
    right: 10em;
    width:auto;
    height: auto; 
}
.contentServ  p{
    font-size: 1.2em;
}
.contentServ a{
    color: #000;
}
@media only screen and (max-width : 1023px) {
    .ServContent div:nth-child(2), .ServContent div:nth-child(3){
        position: relative;
        bottom: 0;
        left: 8%;
        width: auto;
        margin: 1em;
        margin-left: 2em;
    } 
    .ServContent div h1{ 
        font-size: 2em;
    }
    .ServContent div h2{ 
        font-size: 1.4em;
    }
    .ServContent div p{ 
        font-size: 1.2em;
    }
    .serv--A{ 
        top: 4em; 
        width: 26em; 
    }
}
@media only screen and (max-width : 900px) {
    .ServContent{
        padding-bottom: 2em;
    }
    .serv--A{ 
        top: 19em; 
        width: 17em; 
    }
    .serv--B{ 
        display: none;
    }
    .ServContent div h1{ 
        font-size: 1.8em;
    }
    .ServContent div h2{ 
        font-size: 1.3em;
        font-weight: 300;
    }
    .ServContent div{ 
        width: auto;
        height:auto; 
        display: inline-block;   
    }
    .ServContent div:nth-child(1), .ServContent div:nth-child(2), .ServContent div:nth-child(3){
        position: relative;
        bottom: 0;
        left: 0;
        width: auto;
        margin: .4em; 
    }
}
@media only screen and (max-width : 800px) {
    .ServContent{
        padding-bottom: 2em;
    }
    .ServContent div:nth-child(1), .ServContent div:nth-child(2), .ServContent div:nth-child(3){
        position: relative;
        bottom: 0;
        left: 0;
        width: calc(90% - 1em);
        margin: 1em auto; 
        padding: 2em;
        background-color: #241663;
        color: #fff;
    }
    .ServContent div h1{  
        font-size: 1.6em;
        color: #fff;
    }
    .ServContent div h2{ 
        color: #fff;
        font-size: 1.2em;
    }
}
@media only screen and (max-width : 600px) {
    .serv--A{ 
        top: 10em; 
        width: 14em; 
    }
}
@media only screen and (max-width : 500px) {
    .serv--A{ 
        display: none;
    }
}

/*start strategy page*/
.strategyContent article{
    margin-top: 2em;
    text-align: center; 
    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width:calc(100% / 2); 
}
.strategyContent article:nth-child(2){
    margin-top: 8em;
}
.strategy--box{
    margin: 2em auto;
    position: relative;
    top: 0;
    left: 0; 
    display: inline-block;
    text-align: left;
    padding: .3em;
    width:30em;  
}
.strategy--box h1{ 
    font-size: 1.6em;
    font-weight: 900;}
.strategy--box p{ 
    font-size: 1.4em;
    margin-bottom: 1em;
}
.strategyContent article:nth-child(2)  {
    text-align: left;
    float: right;
}
/*end strategy page*/
@media only screen and (max-width : 1023px) {
    .strategy--box{
        margin: 1em auto;
        padding: .3em;
        width:26em;  
    }
    .strategy--box h1{ 
        font-size: 1.6em;
    }
    .strategy--box p{ 
        font-size: 1.4em;
    }
}
@media only screen and (max-width : 800px) {
    .strategy--box{
        margin: 1em auto;
        padding: .3em;
        width:24em;  
    }
    .strategy--box h1{ 
        font-size: 1.4em;
    }
    .strategy--box p{ 
        font-size: 1.2em;
    }
}
@media only screen and (max-width : 700px) {
    .strategyContent article{
        margin-top: 2em; 
        height: auto;
        width: 100%;
    }
    .strategyContent article:nth-child(2){
        margin-top: 0em;
    }
    .strategyContent article:nth-child(2) div{
        left: 4%;
        margin:0;
    }
    .strategy--box{
        margin: 1em auto;
        padding: .3em;
        width: 90%;  
    }
}
/*start footer page*/
#cc--cont{
    text-align: right;
}
.contact--icons{

    overflow: hidden;
    margin-top: 5em;
    text-align: left;
    position: relative;
    top: 0;
    left:43%;
    width: 57%;
    height: auto;

}
.contact--icons ul {
    margin-top: 2em;
}
.contact--icons li p, .contact--icons li h2{
    display: inline-block;}
.contact--icons li div{ 
    width: 4em;
    font-size: 1.4em;
    font-weight: 100;
    display: inline-block;
}
.contact--icons li p{ 
    font-size: 1.4em;
    font-weight: 100;
}
.contact--icons li h2{ 
    margin: .6em;
    font-size: 1.4em;
    font-weight: 100;
}
.contact--icons li h3{ 
    display: inline-block; 
    font-size: 1.4em;
    font-weight: 100;
}

.contact--box{
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    min-height: 34em;
    width: 52%;
    display: inline-block;
}
.foot{
    font-size: 1em;
    padding: .4em;
}
/*start contact*/
#contact_us_details label{
    display: block;
}
#contact_us_details input{
    display: block;
    border: none;
}
.contact--form{ 
    position: relative; 
    top:0;
    left: 0;
    width: 32em;
    height: auto; 
    overflow-x: hidden; 
}
.contact--form label{
    min-height: 1em;
    padding: .3em;
    text-align: right;
}
.ftext{

    background-color: #000; 
    color: #fff;
    margin: .2em auto;
    position: relative; 
    top:0;
    left: 0;
    width: 100%;
    height: 2em; 
    padding: .2em;
} 
.farea{  
    height: 5em;
}
.fbutton{
    position: relative;
    top: .4em;
    left: calc(100% - 7em);

    margin: .6em;
    width: 5em;
    height: 2em;

    line-height: 2em;
}
.fbutt{
    color: #000;
    background: none;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-bottom: 1px solid #000;
}
.cc-kontack{
    overflow: hidden;
    position: relative; 
    top:0;
    left: 0;
    width: 100%;
    height: 0; 
    margin-bottom: 1em;
    /*transition: all 0.4s ease-in-out;*/
    opacity: 0;
}
#selectAccess{
    height: 2.4em;
background: #e01d44;
}

.sidefoot{ 
    padding-top: 2em;

    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; 
}
.contact--sicons{
    text-align: left;
    position: relative;
    top: 0;
    left: 43% ;
    width: 57%;
    height: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}
.nsocial-btn{

    z-index: 5;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    border-bottom: #000 1px solid;
    text-align: left;
}
.nsocial-btn ul{ 
    text-align: left;

}
.nsocial-btn li{

    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    width: 3em;
    height: 2.8em;
    margin: .3em; 
}
.nsocial-btn li a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.nsocial-btn li:nth-child(1){
    margin-left: 10em;
    background-image: url(../imgs/tiltdigitalstudio_instagram.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.nsocial-btn li:nth-child(2){

    background-image: url(../imgs/tiltdigitalstudio_facebook.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nsocial-btn li:nth-child(3){
    background-image: url(../imgs/tiltdigitalstudio_twitter.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.nsocial-btn li:nth-child(4){
    background-image: url(../imgs/tiltdigitalstudio_whatsApp.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*end footer page*/
/*start case study*/
.case--bar{
    margin-top: -.5em;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #241663;
    padding-bottom: 3em;
    padding-top: 3em;
}
.case--bar h1{
    position: relative;
    top: 50%;
    left: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4em;
}

.parentCase{

    overflow: hidden;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0; 
    height: 4em;
    width: calc(100% - 4em);
    border-top: 1px solid #fff;
    margin-top: 3px;
    /*border-bottom: 1px solid #fff;*/

}
.item-Case{
    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0; 
    height: 4em;
    min-width:  18em; 
}
.item-Case p{
    position: relative;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex; 
    justify-content: center;
    align-items: center; 

}
.item-Case:nth-child(3){

    width: 28em;
}

.item-Case-btn{
    overflow: hidden;
    display: inline-block;
    position: absolute;
    top: 3px;
    right: 1em;
    width: 4em;
    height: 100%;
    background: #fff;
    text-align: center;
}

.item-Case-btn p{
    width: 100%;

    display: flex; 
    justify-content: center;
    align-items: center; 
    height: 100%;
}


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

    .parentCase{
        width: calc(100% );
    }
    .item-Case{

        min-width:  16em;
        /*background: yellow;*/
    }
}
@media only screen and (max-width : 900px) {

    .parentCase{
        width: calc(100%);
        height: auto;
    } .item-Case:nth-child(3){

        width: auto;
    }
    .item-Case{

        height: 3em;
        display: block; 
    }
}
@media only screen and (max-width : 600px) {

    .parentCase{
        width: calc(100%);
        height: auto;
    }
    .item-Case{
        overflow: auto;
        min-width:  10em;
        /*background: yellow;*/
    }

    .item-Case p{ 
    }
    .item-Case-btn{
        width: 3em;
        height: 3em;
    }

    .item-Case-btn p{
        font-size: .8em;
    }

    .nsocial-btn li:nth-child(1){
        margin-left: 5em;
    }
}


/*end case study*/

.contact--form  form .xmsg{
    color: #fff;
    margin: .3em auto;
    width: 100%;
    height: auto;
    min-height: 2em;
}
.contact--form  form .xmsg p{
    color:  #000;
    left: 3em;
    width: calc(100% - 3em);
    text-align: left;
    margin: 0.5em auto;
    margin-left: 3em;
    font-size: 1em;
}
#ixshow_load{
    display: none;
    position: absolute;
    top: .5em;
    left:.5em;
    width: 1.5em;
    height: 1.5em;
    border-bottom:rgba(255,255,255,.8) 0.2em solid;
    border-radius: 100%;
    transform:rotate(0deg);

    -webkit-animation: rotating_load 2s linear infinite;
    transition: all 0.4s ease-in-out;
}
#show_load{
    z-index: 10;
    position:absolute;
    top:5%;
    left: 2em;
    width: 60%;
    height:auto;
    min-height: 90%;
    max-height: 90%;
    overflow: auto;
    background: #25ddcf;
    border-radius: 0.3em;
    transition: all 0.2s ease-in-out;
}
#show_load div{
    position:absolute;
    top:48%;
    left: 48%;
    width: 2em;
    height: 2em;
    border-bottom: 0.2em solid rgba(255,255,255,.8);
    transform:rotate(0deg);
    border-radius: 100%;
    -webkit-animation: rotating_load 2s linear infinite;
    transition: all 0.4s ease-in-out;
    transition: display 0.6s ease-in-out;
}
@-webkit-keyframes  rotating_load {
    25%{
        border-bottom:0.2em solid rgba(255,255,255,.6);
    }
    50%{
        border-bottom:0.2em solid rgba(255,255,255,.4);
    }
    50%{
        border-bottom:0.2em solid rgba(255,255,255,.2);
    }
    75%{
        border-bottom:0.2em solid rgba(255,255,255,.4);
    }
    100%{
        border-bottom:0.2em solid rgba(255,255,255,.6);
        transform:rotate(360deg);
    }
}
.hide_load{

    transition: all 0.6s ease-in-out;
    animation: hide_load .6s linear;
    -webkit-animation: hide_load .6s linear;
    transform: scale(0);
}
@-webkit-keyframes  hide_load {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(0);
    }}
.show_load{

    transition: all 0.4s ease-in-out;
    transform: scale(1);
    opacity: 1;
    animation: show_load 0.4s linear;
    -webkit-animation: show_load 0.4s linear;
}
@-webkit-keyframes  show_load {
    from{
        transform: scale(0);
    }
    to{
        transform: scale(1);
    }}


@media only screen and (max-width : 1023px) {
    .contact--icons{ 
        left:37%;
        width: 63%; 
    }
    .contact--box{  
        width: 55%; 
    }
    .contact--sicons{ 
        left: 37% ;
        width: 63%; 
    }
    .foot{
        font-size: 1em;
        padding: .3em;
    }
}
@media only screen and (max-width : 900px) {  
    .contact--icons{
        margin-top: 4em; 
        left:22%;
        width: 78%; 
    }
    .contact--icons ul {
        margin-top: 1em;
    }
    .contact--icons li p{ 
        font-size: 1.3em; 
    }
    .contact--icons li h2{ 
        margin: .6em;
        font-size: 1.3em; 
    }
    .contact--icons li h3{ 
        display: inline-block; 
        font-size: 1.3em; 
    }
    .contact--icons li div{  
        font-size: 1.3em;}
    .contact--sicons{ 
        left:22% ;
        width: 78%; 
    }
    .contact--box{  
        width: 70%; 
    }
    .contact--form{ 
        width: 80%; 
    } 
}
@media only screen and (max-width : 600px) {
    .contact--icons{
        margin-top: 4em; 
        left:3%;
        width: 97%; 
    }

    .contact--icons li div{  
        font-size: 1.2em;}
    .contact--icons li p{ 
        font-size: 1.2em; 
    }
    .contact--icons li h2{ 
        margin: .6em;
        font-size: 1.2em; 
    }
    .contact--icons li h3{ 
        display: inline-block; 
        font-size: 1.2em; 
    }
    .contact--sicons{ 
        left: 2% ;
        width: 96%; 
    }
    .contact--box{  
        width: 88%; 
    }
    .contact--form{ 
        left: 5%;
        width: 90%; 
    } 

    .foot{
        font-size: .95em;
        padding: .2em;
    }
}
@media only screen and (max-width : 400px) {
    .contact--box{  
        width: 100%;
        background-color: #241663;
    }
    .foot{
        font-size: .85em;
        padding: .2em;
    }
    .contact--form  form .xmsg{
        color: #000; 
    }
    .contact--form  form .xmsg p{

        color:  #fff;
    }
    .fbutt{
        color: #fff;
    }
    .ftext{

        background-color: #fff; 
        color: #000;
    }
}
.coverList--box{
    padding-right: 3em;
    border-right: #000 solid 3px;
    text-align: right;
    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% / 3.5);
    height: 22em;
}
.coverList--box h1{
    font-size: 1.2em;

}
.coverList--box h1:nth-child(1) {
    font-size: 1.3em;

}
.coverList--box li{
    font-size: 1.2em;
    font-weight: 100;
}
.coverList--angle{
    text-align: right;
    overflow: hidden;
    display:  block;
    position: relative;
    top: 0;
    left: 0;
    width: 90%;
    height: auto;
    margin: .8em auto;
}
.coverList  {
    margin-top: 6em; 
    text-align: center;  
    width:100%; 
}

.coverList--box{
    padding-right: 3em;
    border-right: #000 solid 3px;
    text-align: right;
    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% / 3.5);
    height: 22em; 
}
.coverList--box h1{
    font-size: 1.2em;
}
.coverList--box li{
    font-size: 1.2em;
    font-weight: 100;
}
.coverList--angle{
    text-align: right;
    overflow: hidden;
    display:  block;
    position: relative;
    top: 0;
    left: 0;
    width: 90%;
    height: auto;
    margin: .8em auto;
}

@media only screen and (max-width : 1023px) {
    .coverList  {
        margin-top: 4em; }
    .coverList--box{
        padding-right: 2em;
        border-right: #000 solid 3px; 
        width: calc(100% / 3.7);
    }
    .coverList--box h1{
        font-size: 1.1em;
    }
    .coverList--box li{
        font-size: 1.1em;
    }
}
@media only screen and (max-width : 900px) {
    .coverList--box{ 
        padding-right: .6em;
        width: calc(100% / 3.2);
    }
    .coverList--box h1{
        font-size: 1em;
    }
    .coverList--box li{
        font-size: 1em;
    }
}
@media only screen and (max-width : 600px) {
    .coverList--box{ 
        padding-right: 2em;
        width: 80%;
        height: auto;
    }
} 

#gig_loading{
    z-index: 599;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: all 0.8s ease-in-out;
}
#gig_loading_slide{
    z-index: 200;
    position: absolute;
    top:0;
    left: 100%;
    width: 100%;
    height: 100%;
    transition: all 0.8s ease-in-out;
    background: #fff;
}
#gig_loading_pixels , .gig_loading_pixels{
    position: absolute;
    bottom:4em;
    right: 4em;
    width: 6em;
    height: 4em;
}
#gig_loading_pixels div, .gig_loading_pixels div{
    margin: 0.5em auto;
    display: block;
    position: relative;
    top:0;
    height: 2px;
    background: #fff;
    transition: all 0.4s ease-in-out;
}
#gig_load_A{
    width: 1em;
    transition: all 0.4s ease-in-out;
    animation: rotating 2s linear infinite;
}
#gig_load_B{
    width: 4em;
    transition: all 0.4s ease-in-out;
    animation: rotating 2s linear infinite;
}
#gig_load_C{
    width: 2em;
    transition: all 0.4s ease-in-out;
    animation: rotating 2s linear infinite;

}
@keyframes rotating {
    60%{
        width:100%;
    }
}
/*end loading*/