@import url("homepageslides.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Quando);
@import url(https://fonts.googleapis.com/css?family=El+Messiri);

*:focus{outline:none;}
::-moz-selection {background-color: #000; color: #FFF;}
::selection {background-color: #000; color: #FFF;} /* Works in Safari */

html, body{width:100%; height:100%; margin:0px; padding:0px; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch;}
body{background-color:rgba(255,255,255,1); font-family: 'Open Sans', sans-serif; font-weight:400; color:rgba(33,33,33,1); font-size:62.5%; line-height: normal; position:relative;}

h1, h2, h3, h4, p, ul, ol{ margin:0px; padding:0px; font-weight:normal;}

h1, h2{font-family: 'Quando', serif; font-size:2.15em; font-weight:600; line-height:1.35em; padding-bottom:20px; letter-spacing:0px;}
h2{font-size:2.25em;}

h3{ font-size:2.15em; color:rgba(163,29,69,1); padding-bottom:20px;}

a{text-decoration:none; }
a:hover, a.current{}

.link{color:rgba(163,29,69,1)}
.link:hover{color:rgba(33,33,33,1)}

p{ font-size:1.45em; line-height:1.8em; padding-bottom:20px;}
span.bolder{ font-weight:700; text-transform:uppercase; font-size:.85em;}

.transitions{-webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s;}

._txtF, ._txtA{font-family: 'Open Sans', sans-serif; font-weight:600; font-size:1.25em;  border:0; color:rgba(100,100,100,1);  width:100%; padding:4%; background-color:rgba(248,248,248,1); -webkit-appearance: none; border-radius: 0;}
._txtF:focus, ._txtA:focus{ background-color:rgba(248,248,248,1);}

._txtA{ height:120px; width:100%; padding:2%;}
._img{ display: inline-block;}
._hcp-logo{ width: 200px; height: auto; margin-bottom: 40px;}

#cd-logo{ display: block; float: left; width: auto;; height: 68px; margin-top: 14px; margin-left: 40px;}
#cd-logo img{ height: 100%; width: auto;}
.cd-menu-trigger{ display:none !important;}
#navigation{ float:right; margin:32px 40px 0px 0px;}
#navigation ul{}
#navigation ul li{ list-style:none; display:inline-block; margin:0px 15px;}
#navigation ul li a{ color:rgba(211,173,184,1); font-size:1.65em;}
#navigation ul li a:hover, #navigation ul li a.current{ color:rgba(255,255,255,1);}
.switch-lang{font-family: 'El Messiri', sans-serif; border:1px dashed rgba(211,173,184,1); padding:6px 12px; font-size:1.55em !important; margin-left:20px;}

.container{ width:100%; min-width:1100px; max-width:1200px; margin:0 auto;}
#header{ height:100%; width:100%;}
#inner-header{height:450px; width:100%; background-color:rgba(240,240,240,1); overflow:hidden; text-align:center;}
#inner-header img{ width:100%; min-width:1000px; height:auto; display:inline-block; margin:0 auto; vertical-align: bottom}
#intro-block{ background-color:rgba(248,248,248,1); width:45%; margin-top:-100px; padding:40px 60px; position:relative; z-index:9;}
#intro-block p{ padding-bottom:0;}

.hp-products-block{ text-align:center; width:80%; margin:0 auto; margin-top:80px;}
#hp-products{ margin:20px 0px 40px 0px; }
.hp-product{ width:21%; display:inline-block; border:1px solid rgba(245,245,245,1); background:rgba(245,245,245,1); padding:2% 1%; margin:0px .85%; cursor:pointer;  transition: all 0.3s ease-in-out; vertical-align:top;}
.hp-product:nth-child(odd) { margin-top:20px;}
.hp-product a{ display:block; width:100%; height:100%;}
.hp-product img{ width:90%; height:auto; display:block; margin:0 auto;}
.hp-product p{ color:rgba(33,33,33,1); font-size:1.3em; line-height:1.35em;}
.hp-product:hover{ background:rgba(255,255,255,1); border:1px solid rgba(255,255,255,1); box-shadow: 0 19px 38px rgba(0,0,0,0.075), 0 15px 12px rgba(0,0,0,0.05); transform: scale(1.125, 1.125); position:relative; z-index:99;}
.hp-product:hover{margin:0px 0%;}

.button--aylen {display:inline-block; padding: 1.25em 2em;border: none;vertical-align: middle;position: relative; z-index: 0; -webkit-backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;font-size:1.118em;font-weight:600;background-color:rgba(35,31,32,1) !important;color:rgba(255,255,255,1) !important;text-transform:uppercase;}
.button--aylen:focus {outline: none;}
.button--aylen > span {vertical-align: middle;}

.button.button--aylen {background: #fff;color: #37474f;overflow: hidden;-webkit-transition: color 0.3s;transition: color 0.3s;}
.button--aylen.button--inverted {background: none;color: #fff;}
.button--aylen::before,
.button--aylen::after {content: '';position: absolute;height: 100%;width: 100%;bottom: 100%;left: 0;z-index: -1;-webkit-transition: -webkit-transform 0.3s;transition: transform 0.3s;-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.button--aylen::before {background: rgba(162,1,46,1);}
.button--aylen::after {background: rgba(83,1,25,1);}
.button--aylen:hover {color: #fff;cursor:pointer;}
.button--aylen:hover::before,
.button--aylen:hover::after {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
.button--aylen:hover::after {-webkit-transition-delay: 0.175s;transition-delay: 0.175s;}

.grid_50p{ width: 50%; display: inline-block;}
.grid_75p{ width: 75%; display: inline-block;}
.grid_content{ padding: 1em 2em;}
.video-container{	position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0px; height: 0; border:4px solid #FFF; margin-top:10px;}
.video-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.module{opacity:0}
.come-in {opacity:1;transform: translateY(100px);animation: come-in 1s ease forwards;}
.come-in:nth-child(odd) {animation-duration: .5s;}
.already-visible {transform: translateY(0); animation: none; opacity:1;}
@keyframes come-in {to { transform: translateY(0);  opacity:1;}}

#inner-page{ padding:80px 0px;}
.centered{ text-align:center;}
.page-intro{width:65% ; margin:0 auto;}

#clients-block{}
.client{width:14%; margin:.35%; background-color:rgba(249,249,249,1); display:inline-block;}
.client img{ width:100%;}

.filters-button-group{ margin:40px 0px;}
.filters-button-group button{ display:inline-block; border:0; background-color:transparent; position:relative; font-size:1.45em; cursor:pointer; margin:0px 10px 30px 10px; font-family: 'Quando', serif; }
.filters-button-group button::before{ content: ""; position: absolute; width: 25px; height: 2px; bottom:-10px; left:50%; margin-left:-12px; background-color:rgba(163,29,69,1); visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; }
.filters-button-group button:hover::before{visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);}
.is-checked{ color:rgba(163,29,69,1); visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); content: ""; display:inline-block}
.is-checked::before{ visibility: visible !important; -webkit-transform: scaleX(1) !important; transform: scaleX(1) !important;}



.product-listing{ vertical-align:top; text-align:center;}
.product-listing .product{ position: relative; display:inline-block; overflow:hidden; margin:0.5%; width: 24%; min-height:250px; background: rgba(255,255,255,1); text-align: center; cursor: pointer; border:1px dashed rgba(200,200,200,1);}
.product-listing .product img{opacity:1; width:100%;}
.product-listing .product p{ color: rgba(33,33,33,1); font-size: 1.45em; -webkit-backface-visibility: hidden; backface-visibility:hidden; visibility:hidden}
.product-listing .product p::before,
.product-listing .product p::after{ pointer-events: none;}

.product-listing .product p,
.product-listing .product p > a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.product.effect-ruby { background-color:rgba(255,255,255,1);}
.product.effect-ruby img { opacity:1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.08); transform: scale(1.08);}
.product.effect-ruby:hover img { opacity:.15; -webkit-transform: scale(1); transform: scale(1);}
.product.effect-ruby p {margin-top:44%; color:rgba(33,33,33,1); font-size:1.35em; font-weight:600; line-height:1em; -webkit-transition: -webkit-transform 0.35s;	transition: transform 0.35s;-webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0);}
.product.effect-ruby p::after{ content:''; display:block; height:4px; width:21px; background-color:rgba(163,29,69,1); z-index:99; margin:0 auto; margin-top:10px;}
.product.effect-ruby:hover p { -webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0); visibility: visible;}

.contact-page{ text-align:center;}
.contact-left{ width:25%; margin-right:10%; display:inline-block; text-align: left; vertical-align:top;}
.contact-right{ width:50%; display:inline-block; text-align: left; vertical-align:top;}
#map_canvas{ height:550px;}
#contact_block_map{ padding:10px 0px 0px 0px;}
#contact_block_map h2{ font-size:1em;}
#contact_block_map p{ font-size:.95em; line-height:1.35em;}
#contact_block_map p span{ font-weight:600;}
.contact-page-footer{ margin-top:0px !important;}

.form-block{ margin:20px 0px 0px 0px;}
.col-fluid{ width:99%; margin:.5%;}
.col-half{ width:49%; float:left; margin:.5%;}
.submit-block{ margin-top:10px;}
.msgs{ margin-top:20px; font-size:.85em;}
.msgs p.error{ color:rgba(255,0,0,1); line-height:1.35em; font-weight:600;}


#footer{background-color:rgba(35,31,32,1); padding:30px 0px 30px 0px; margin-top:60px; color:rgba(255,255,255,1); font-size:.75em;  position:relative; z-index:999;}
#footer p{ padding:0px; font-weight:600; display:block; float:left;}

.clear{ clear:both;}

#footer-dubaifreelancedesigner{ float:right;}
.dubaifreelancedesigner{ background:url(../images/dubaifreelancedesigner.png) no-repeat; background-position:right top; width:55px; height:21px;  display: inline-block; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -ms-transition-duration: 0.4s; transition-duration: 0.4s; font-size:1.25em; text-align:left; margin:0px 0px; text-decoration:none; font-weight:700; color:rgba(120,120,120,1); float:right; padding-top:6px; text-transform:uppercase;}
.dubaifreelancedesigner:hover{ background-position:right bottom; text-decoration:none !important; color:rgba(200,200,200,1);}


@media screen and (min-width:960px) and (max-width:1100px){
.container{ width:96%; min-width:96%; max-width:96%; overflow-x: hidden}
.hp-products-block{ width:100%;}
#intro-block{ width:90%; margin:0 auto; margin-top:20px; padding:5% 5% 5% 5%; position:relative; z-index:9; text-align:center;}
}

@media screen and (min-width:768px) and (max-width:960px){
body{-webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; overflow-x: hidden}
.container{ width:96%; min-width:96%; max-width:96%;}
._menu{ display:none;}
.cd-menu-trigger{ display: block !important; left:10px !important; width: 70px;}
._menu{ display:none;}
.switch-lang{ display:block; margin:-1px 0px 0px 0px; font-size:1.35em !important;}
#cd-logo{margin-left:0px;  position: absolute; left:50%; margin-left: -130px}

.hp-products-block{ width:100%;}

.hp-products-block{ width:100%;}



.slides-navigation a{display: none;}
#intro-block{ width:90%; margin:0 auto; margin-top:-10%; padding:5% 5% 5% 5%; position:relative; z-index:9; text-align:center;}


.page-intro{width:85%}
#clients-block{}
.client{width:18%;}

.contact-left{ width:25%; margin-right:10%}
.contact-right{ width:65%;}

.product-listing .product{min-width: 31.3333333%;	max-width: 31.3333333%;	width: 31.3333333%; margin:1%;}
.product-listing.effect-ruby p {	margin-top:18%;}
}



@media screen and (min-width:481px) and (max-width:768px){
body{-webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; overflow-x: hidden}
.container{ width:96%; min-width:96%; max-width:96%;}
.cd-menu-trigger{ display: block !important;}
._menu{ display:none;}
.cd-menu-trigger{ display: block !important; left:10px !important; width: 70px;}
._menu{ display:none;}
.switch-lang{ display:block; margin:-1px 0px 0px 0px; font-size:1.35em !important;}
#cd-logo{margin-left:0px;  position: absolute; left:50%; margin-left: -130px}

#intro-block{ width:90%; margin:0 auto; margin-top:-40%; padding:5% 5% 5% 5%; position:relative; z-index:9; text-align:center;}

.grid_50p, .grid_75p{ width: 100%;}

#inner-page{ padding:40px 0px;}
#inner-header{height:400px;}
#inner-header img{ min-width:800px;}

.hp-products-block{ width:100%;}
.hp-product{ width:45%; padding:2% 1%; margin:0px .85% .85% 0px; cursor:pointer;  transition: all 0.3s ease-in-out; vertical-align:top;}
.hp-product:nth-child(odd) { margin-top:0px;}
.hp-product:hover{margin:0px .85% .85% 0px;}

#intro-block{ width:90%; margin:0 auto; margin-top:-40%; padding:10% 5% 10% 5%; position:relative; z-index:9; text-align:center;}
.slides-navigation a{display: none;}

.page-intro{width:100%}
.page-intro h1 br{ display:none;}
#clients-block{}
.client{width:24%;}

.product-listing .product{min-width: 46%;	max-width: 46%;	width: 46%; margin:2%; min-height:280px;}
.product-listing.effect-ruby p {	margin-top:18%;}

.contact-left{ width:100%;}
.contact-right{ width:100%;}
.form-block{ margin:20px 0px 0px 0px;}
.col-fluid{ width:99%; margin:1.5% 1.5% 1.5% 0%;}
.col-half{ width:99%; float: none; margin:1.5% 1.5% 1.5% 0%;}


#footer p{float: none; width:100%; text-align:center; padding-bottom:10px;}
 #footer-dubaifreelancedesigner{float: none; text-align:center; margin:0 auto;}
.dubaifreelancedesigner{ float:none;}
}


@media screen and (min-width:320px) and (max-width:480px){
body{-webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; overflow-x: hidden}
.container{ width:96%; min-width:96%; max-width:96%;}
.cd-menu-trigger{ display: block !important; width: 70px;}
._menu{ display:none;}
.switch-lang{ display:block; margin:-1px -20px 0px 0px; font-size:1.35em !important;}
.cd-menu-trigger { left:10px !important; top:23px !important;}

#slides .slides-container li a span.hcp_logo{ width: 120px; height: 72px; background-size: 120px 72px;  top: 110px; right: 40px;}
#cd-logo{margin-right:0px; height: 50px; top: 9px; position: absolute; left:50%; margin-left: -90px}
#header{ height:100%; width:100%;}
#intro-block{ width:90%; margin:0 auto; margin-top:-40%; padding:10% 5% 10% 5%; position:relative; z-index:9; text-align:center;}
.slides-navigation a{display: none;}

#inner-page{ padding:40px 0px;}
#inner-header{height:350px; width:100%;}
#inner-header img{ width: auto; min-width: inherit; height:100%;}

.grid_50p, .grid_75p{ width: 100%;}

.hp-products-block{ width:100%;}
.hp-product{ width:45%; padding:2% 1%; margin:0px .85% .85% 0px; cursor:pointer;  transition: all 0.3s ease-in-out; vertical-align:top;}
.hp-product:nth-child(odd) { margin-top:0px;}
.hp-product:hover{margin:0px .85% .85% 0px;}

.page-intro{width:100%}
.page-intro h1 br{ display:none;}
#clients-block{}
.client{width:46%; margin:1.5%}

.filters-button-group button{margin:0px 5px 30px 5px;}
.product-listing .product{min-width: 46%;	max-width: 46%;	width: 46%; margin:2%; min-height:180px;}
.product-listing.effect-ruby p {	margin-top:18%;}

.contact-left{ width:100%;}
.contact-right{ width:100%;}
.form-block{ margin:20px 0px 0px 0px;}
.col-fluid{ width:99%; margin:1.5% 1.5% 1.5% 0%;}
.col-half{ width:99%; float: none; margin:1.5% 1.5% 1.5% 0%;}


#footer p{float: none; width:100%; text-align:center; padding-bottom:10px;}
 #footer-dubaifreelancedesigner{float: none; text-align:center; margin:0 auto;}
.dubaifreelancedesigner{ float:none;}
}