@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*{
    font-family: 'Roboto', sans-serif;
}

@font-face{font-weight:400;font-style:normal;src:url(/Raleway-Regular.woff) format("woff"),url(/Raleway-Regular.woff2) format("woff2")}@font-face{font-family:Raleway-SemiBold;font-weight:600;font-style:normal;src:url(/Raleway-SemiBold.woff) format("woff"),url(/Raleway-SemiBold.woff2) format("woff2")}@font-face{font-family:Raleway-Bold;font-weight:700;font-style:normal;src:url(/Raleway-Bold.woff) format("woff"),url(/Raleway-Bold.woff2) format("woff2")}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;font-size:100%;vertical-align:baseline}a:active,a:hover{outline:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}*,:after,:before,html{-webkit-box-sizing:border-box;box-sizing:border-box}:focus{outline:0}audio,img,video{max-width:100%;height:auto}audio,canvas,iframe,img,svg,video{vertical-align:middle}iframe{border:0}textarea{resize:none;overflow:auto;vertical-align:top;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}button,input,select,textarea{outline:none;border:none;font-size:100%;margin:0}button,input{line-height:normal}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{line-height:1.6;color:#101010;height:100%;min-width:320px;overflow-x:hidden}body,html{font-size:16px}body{margin:0;padding:0;font-family:Raleway-Regular,Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}a{text-decoration:none}li,ul{margin:0;padding:0;list-style-type:none}.container,.section,section{position:relative}.container{width:1200px;max-width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:0 auto}.height{height:100vh}.canvas{height:100%;left:0;position:absolute;top:0;width:100vw}.flex{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1}.text{font-size:42px;line-height:48px;color:#fff;text-align:center;padding:0 10px}.text span{color:#e31b6d;font-weight:600}.btn{color:#03e9f4;display:inline-block;font-size:18px;letter-spacing:3px;margin:20px 40px;padding:16px 25px;position:relative;overflow:hidden;text-decoration:none;text-transform:uppercase;-webkit-transition:.5s;-o-transition:.5s;transition:.5s;cursor:pointer;-webkit-box-reflect:below 1px linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.333333))}.btn:first-child{-webkit-filter:hue-rotate(290deg);filter:hue-rotate(290deg)}.btn:nth-child(3){-webkit-filter:hue-rotate(110deg);filter:hue-rotate(110deg)}.btn:hover{background:#03e9f4;-webkit-box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;color:#fff}.btn span{display:block;position:absolute}.btn span:first-child{-webkit-animation:animate1 1s linear infinite;animation:animate1 1s linear infinite;background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(#03e9f4));background:-o-linear-gradient(left,rgba(0,0,0,0),#03e9f4);background:linear-gradient(90deg,rgba(0,0,0,0),#03e9f4);height:2px;left:-100%;top:0;width:100%}.btn span:nth-child(2){-webkit-animation:animate2 1s linear infinite;animation:animate2 1s linear infinite;-webkit-animation-delay:.25s;animation-delay:.25s;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(#03e9f4));background:-o-linear-gradient(top,rgba(0,0,0,0),#03e9f4);background:linear-gradient(180deg,rgba(0,0,0,0),#03e9f4);height:100%;top:-100%;right:0;width:2px}.btn span:nth-child(3){-webkit-animation:animate3 1s linear infinite;animation:animate3 1s linear infinite;-webkit-animation-delay:.5s;animation-delay:.5s;background:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,0)),to(#03e9f4));background:-o-linear-gradient(right,rgba(0,0,0,0),#03e9f4);background:linear-gradient(270deg,rgba(0,0,0,0),#03e9f4);bottom:0;height:2px;right:-100%;width:100%}.btn span:nth-child(4){-webkit-animation:animate4 1s linear infinite;animation:animate4 1s linear infinite;-webkit-animation-delay:.75s;animation-delay:.75s;background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,0)),to(#03e9f4));background:-o-linear-gradient(bottom,rgba(0,0,0,0),#03e9f4);background:linear-gradient(1turn,rgba(0,0,0,0),#03e9f4);bottom:-100%;height:100%;left:0;width:2px}@-webkit-keyframes animate1{0%{left:-100%}50%,to{left:100%}}@keyframes animate1{0%{left:-100%}50%,to{left:100%}}@-webkit-keyframes animate2{0%{top:-100%}50%,to{top:100%}}@keyframes animate2{0%{top:-100%}50%,to{top:100%}}@-webkit-keyframes animate3{0%{right:-100%}50%,to{right:100%}}@keyframes animate3{0%{right:-100%}50%,to{right:100%}}@-webkit-keyframes animate4{0%{bottom:-100%}50%,to{bottom:100%}}@keyframes animate4{0%{bottom:-100%}50%,to{bottom:100%}}.projects{padding:80px 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#f5f5f5}.title{font-family:Raleway-SemiBold;font-size:30px;color:#444649;margin-bottom:30px}.flex-row button{color:#616161;font-size:17px;cursor:pointer;background-color:rgba(0,0,0,0);margin:0 25px;padding:0 40px;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}.gallery{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:20px}.card{-webkit-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.card,.card-name{position:absolute}.card-name{left:0;top:0;width:100%;opacity:0;text-align:center;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:2}.card-name__title{font-family:Raleway-Bold;font-size:20px;color:#1b242f}.card-name__subtitle{font-size:16px;color:#e31b6d}.button{bottom:0;left:0;position:absolute;right:0;border:2px solid #e31b6d;font-size:16px;margin:0 auto;padding:7px 0;max-width:170px;color:#1b242f;opacity:0;text-align:center;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:2;cursor:pointer}.button:hover{background:#e31b6d;color:#fff}.mix{position:relative;width:33.3333%;padding-bottom:25%;overflow:hidden}.mix:hover .card{opacity:0}.mix:hover .card-name{cursor:default;opacity:1;top:24%}.mix:hover .button{bottom:24%;opacity:1}.filter-wrap{position:relative;max-width:788px;margin:0 auto;white-space:nowrap}.float-bar{left:30px;background:#e31b6d;border-radius:1px;height:25px;overflow:hidden;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.float-bar,.float-bar .row{bottom:0;position:absolute;top:0;margin:auto 0}.float-bar .row{left:-30px;-webkit-transition:left .5s ease-in-out;-o-transition:left .5s ease-in-out;transition:left .5s ease-in-out}.float-bar .row .filter{color:#fff}@media screen and (max-width:1280px){html{font-size:16px}}@media screen and (max-width:768px){html{font-size:15px}}@media screen and (max-width:480px){html{font-size:14px}}@media (max-width:767px){.text{font-size:32px;line-height:40px}.projects{padding:30px 0}.title{font-size:24px;margin-bottom:17px}.flex-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex-row button{margin:3px 1.7%;padding:5px 3.5%}.flex-row button.mixitup-control-active{background:#e31b6d;border-radius:1px;color:#fff}.card-name__title{font-size:14px}.card-name__subtitle{font-size:12px}.button{font-size:13px;padding:5px 10px;max-width:130px}.float-bar{display:none}}@media (max-width:991px){.projects{padding:50px 0}.mix:hover .card-name{top:15%}.mix:hover .button{bottom:20%}}@media (max-width:800px){.mix{width:50%;padding-bottom:36%}.mix:hover .card-name{top:10%}.mix:hover .button{bottom:15%}}

.title{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

.tr-popup{
	display: none;
}

*{
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	outline: none;
}


body{
    background: #FDF5E6;
    font-family: 'Montserrat', sans-serif !important;
    color: #444649;

}

.container_1{
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}


/*portfolio
=====================*/
.portfolio{
	padding: 0px 0px 100px;
    
} 


.title{
	text-transform: uppercase;
	display: flex;
	justify-content: center;
	font-size: 30px;
	padding: 100px 0 30px 0;
}


.content{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 0px 20px;
	transition-duration: .2s;
}
.item_href {
    width: 50%;
    position: relative;
}

.item:nth-child(2){
	margin-left: 20px;
}

.item:nth-child(3){
	margin-top: 50px;
}
.item_href img{
    width: 100%;
}
.sub_title {
	font-size: 22px;
	display: flex;
	text-align: center;
	justify-content: center;
	color: #444649;

}
.portfolio_item{

}

.tabs{
	display: flex;
	justify-content: center;
	padding-bottom: 50px;
}

.tab:first-child{
	margin-right: 20px;

}


.tab{
	color: #444649;
	font-size: 20px;
	cursor: pointer;
    padding: 0 8px;
}

.tab_active{
    transition: all .4s ease;
    background: #E31B6D;
}

.tab span{
	font-size: 20px;
	text-transform: uppercase;
}


.the{
	overflow: hidden;
}

.content_test{
	padding-top: 500px;
}

.dws-wrapper{
}

.boxImg{
    position: relative;
    font-family: Cuprum, Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.boxImg img{
    transition: .2s;
}
.container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.container:hover{
	transition: .5s;
	background: #fff;
}
.container:before, .container:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    opacity: .1;
    transition: 1s;
    background: #fff;
}
.container:before{
    transform: translateX(-125%) rotate(45deg);
    background: rgba(230, 12, 50, 0.8);
}
.container:after{
    transform: translateX(195%) rotate(45deg);
    background: rgba(11, 72, 174, 0.8);
}
.text{
 top: 20%;
 color: black;
 text-align: center;
 z-index: 10;
 color: black;
 font-weight: 600;
}
.text h1{
 /*margin-bottom: 20px;*/
 font-size: 20px;
 /*transform: scale(0);*/
 transition: .5s;
 font-weight: 600;
 margin-top: -20%;
 text-transform: uppercase;
}
.text p{
 font-size: 18px;
 margin: 0 100px;
 text-align: justify;
 transform: scale(2);
 transition: .5s;
 opacity: 0;
}
a.bt{
 top: 100%;
 left: 37%;
 color: black;
 text-decoration: none;
 text-transform: uppercase;
 padding: 0 8px;
 border-radius: 2px;
 opacity: 0;
 transition: .2s ease-in-out;
 overflow: hidden;
 font-size: 12px;
 border: 1.5px solid #E31B6D;
 display: inline-block;
 margin-top: 60%;
 height: 30px;
 line-height: 28px;
}
a.bt:before{
 content: '';
 position: absolute;
 top: -8px;
 left: -75px;
 height: 50px;
 width: 50px;
 background: linear-gradient(90deg,rgba(255,255,255,.1), rgba(255,255,255,.5));
 transform: skewX(-45deg);
}

a.bt:hover::before{
 left: 150px;
 transition: .5s ease-in-out;
}

a.bt:hover{
	background: #E31B6D;
	color: #fff;
}
a.bt:active{}
.boxImg:hover img{
 filter: blur(2px);
}
.boxImg:hover a.bt{
 opacity: 1;
 transition: .5s;
 margin-top: 0;
}
.boxImg:hover .container::before{
 transform: translateX(92%) rotate(45deg) scale(2);
 transition: .5s;
 opacity: .6;
}
.boxImg:hover .container::after{
 transform: translateX(-25%) rotate(45deg) scale(2);
 transition: .5s;
 opacity: .6;
}
.boxImg:hover .text h1{
 /*transform: scale(1);*/
 margin-top: 15%;
}
.boxImg:hover .text p{
 transform: scale(1);
 opacity: 1;
}
.boxImg:hover{

}




/*media
======================*/

@media screen and (max-width: 630px){
	.title{
		font-size: 25px;
	}
}


@media screen and (max-width: 450px){
	.title{
		font-size: 20px;
	}

	.sub_title{
		font-size: 18px;
	}

	.intro_inner{
        margin: 200px 20px 150px;
    }
    .btn{
        margin-top: 75px;
    }

    .portfolio{
    	margin-top: 25px;
    }
    .btn{
    	font-size: 12px;
    }
     .intro_text{
     	font-size: 27px;
    }
    .dws-wrapper{
        margin-bottom: 15px !important;
    }
}

@media screen and (max-width: 350px){
	.btn{
    	font-size: 10px;
    }
}


@media screen and (max-width: 880px){
	.content{
		/*display: grid;*/
		/*grid-column-gap: 50px;*/
		grid-template-columns: 1fr 1fr;
	}

/*	.content_wp{
		display: grid;
		grid-column-gap: 50px;
		grid-template-columns: 4fr;
	}

	.item:nth-child(2){
	    margin-left: 0px;
    }

    .item:nth-child(1){
	    padding-bottom: 40px;
	    
    }
    .dws-wrapper{
        margin-bottom: 30px;
    }
    .dws-wrapper:last-child{
        margin-bottom: 0;
    }
    .container:hover{
        transition: none;
        background: none;
    }
    .container{
        position: inherit;
        top: 0;
        left: 0;
    }
    .text h1{
        margin: 0;
        font-size: 26px;
    }
    a.bt{
        padding: 4px 6px;
        font-size: 14px;
    }
    .boxImg a.bt{
     opacity: 1;
     transition: .5s;
    }
    .boxImg:hover .container::before{
     transform: translateX(92%) rotate(45deg) scale(2);
     transition: .5s;
     opacity: .6;
    }
    .boxImg:hover .container::after{
     transform: translateX(-25%) rotate(45deg) scale(2);
     transition: .5s;
     opacity: .6;
    }
    .boxImg .text h1{
     transform: scale(1);
    }
    .boxImg .text p{
     transform: scale(1);
     opacity: 1;
    }*/
    
}

@media screen and (max-width: 600px){
    .content{
        /*display: grid;*/
        /*grid-column-gap: 50px;*/
        grid-template-columns: 1fr;
    }
    .boxImg:hover .text h1{
        margin-top: 20%;
        margin-bottom: 20px;
    }
    a.bt{
        padding: 0 13px;
        height: 36px;
        line-height: 36px;
    }
}
.none{
	transition-duration: .2s;
	display: none;
}



@media screen and (max-width: 400px){
	.boxImg:hover .text h1{
		margin-top: 0;
	}
	.boxImg:hover .text h1{
		margin-top: 10%;
	}
}