/*--------------------------------------------------

BODY

--------------------------------------------------*/

*{

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

  -moz-box-sizing: border-box;    /* Firefox, other Gecko */

   box-sizing: border-box;         /* Opera/IE 8+ */

 }

header, section, footer, aside, nav, main, article, figure {display: block;}

audio, canvas, video {display:inline-block; *display:inline; *zoom:1; }

audio:not([controls]) {display:none; }

[hidden] {display:none; }

html {font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; height: 100% }

html, button, input, select, textarea {font-family: 'Heebo', sans-serif; color:#000;}



body{

	-webkit-font-smoothing: subpixel-antialiased !important;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility:    hidden;

    -ms-backface-visibility:     hidden;



}

body {margin:0; padding:0; background:#fff; font-size:18px; font-weight: normal; line-height:1.3; height: 100%}

::-moz-selection {background:#72a9bd; color:inherit; text-shadow:none;}

::selection {background:#72a9bd; color:inherit; text-shadow:none; }

img::selection {background:transparent;}

img::-moz-selection {background:transparent;}

a{outline: none; }

a{ color: #2F2F2F; }

a:hover{ color: #666666; }

img {border: none;}

.f-left{float: left;}

.f-right{float: right;}

.left{text-align: left;}

.right{text-align: right;}

.center{text-align: center;}

.clear{ clear: both;}

.ib{display: inline-block;}

.rtl{direction:rtl;}









/*--------------------------------------------------

Non-Semantic Helper Classes

--------------------------------------------------*/



.hidden {display:none !important; visibility:hidden;}

.visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}

.invisible {visibility:hidden;}

.clearfix:before, .clearfix:after, .cf:before, .cf:after  {content:""; display:table;}

.clearfix:after, .cf:after {clear:both;}

.clearfix, .cf {*zoom:1;}

::-webkit-input-placeholder {   color: #000;}

:-moz-placeholder { /* Firefox 18- */   color: #000;}

::-moz-placeholder {  /* Firefox 19+ */    color: #000;}

:-ms-input-placeholder {   color: #000;}



/*--------------------------------------------------

Typography

--------------------------------------------------*/

h1{	margin: 0;	padding: 0; font-size: 2em; font-weight: bold; }

h2{font-size:1.2em; font-weight: bold;  margin: 0;}

h3{	margin: 0;	padding: 0; font-size: 1em; }

h4{	font-size: 1.3em; font-weight: normal; }

h5{	font-size: 1em; font-weight: normal; text-align: right; margin: 0;  padding-top:1%; }



/*--------------------------------------------------

Basic

--------------------------------------------------*/

#wrapper{

	width: 100%;

   text-align: center;

   margin:0 auto;



    position: relative;





}

.width-wrapper{margin:0 auto; width:100%; max-width: 1200px;  position: relative;}



#holder{ width: 100%; margin: 0 auto; clear: both;  background-color: #ecf0f1;}

#top_holder{ clear: both;}

#holder_inner{ width: 100%; padding: 3% 2%;}





/*--------------------------------------------------

header

--------------------------------------------------*/

header{

 width:100%;

  margin:0 auto;

  background-color: #2d2d2d;

  padding:1% 0;



}

#logo{width: 25%; margin:0 auto;}

#logo img{ display: block; width: 100% }







.styled-select select{

   background: #fff;

   width: 100%;

   padding: 3%;

   line-height: 1;

   border: 1px solid #c5c5c5;

   border-radius: 0;

   direction: rtl;

   font-size: 1em;

   }

.styled{

   background: #fff;

   width: 100%;

   padding: 5px;

   line-height: 1;

   border: 1px solid #c5c5c5;

   border-radius: 0;

   }





/*--------------------------------------------------

Hover Effects

--------------------------------------------------*/

.grid {

	position: relative;

	margin: 0 auto;

	padding:4% 0 8% 0;

	max-width: 1200px;

	list-style: none;

	text-align: center;



}



/* Common style */

.grid figure {

	position: relative;

	float: right;

   /*	overflow: hidden; */

	margin: 10px 5.5%;

	width: 22%;



	text-align: center;

	cursor: pointer;

    border-radius:50%;

}

.blue { 	background: #1e8bc3; }

.red{  	background: #f32613; }

.green{  	background: #26a65b; }



.blue p{   color: #1e8bc3;  }

.red p{     color: #f32613; }

.green p{   color: #26a65b; }



.grid figure img {

	position: relative;

	display: block;

	min-height: 100%;

	max-width: 100%;

	opacity: 0;

    border-radius:50%;



}



.grid figure figcaption {

	padding: 15% 0;

	color: #fff;

	text-transform: uppercase;

	font-size: 2.25em;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

}



.grid figure figcaption::before,

.grid figure figcaption::after {

	pointer-events: none;

}



.grid figure figcaption,

.grid figure figcaption > a {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}



/* Anchor will cover the whole item by default */

/* For some effects it will show as a button */

.grid figure figcaption > a {

	z-index: 1000;

	text-indent: 200%;

	white-space: nowrap;

	font-size: 0;

	opacity: 0;

}



.grid figure h2 {

	word-spacing: -0.15em;

	font-weight: 300;

}



.grid figure h2 span {

	font-weight: 800;

}



.grid figure h2,

.grid figure p {

	margin: 0;

}



.grid figure p {

	letter-spacing: 1px;

	font-size: 68.5%;



}

figure.effect-chico img {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: scale(1);

	transform: scale(1);

}



figure.effect-chico:hover img {

	opacity: 1;

	-webkit-transform: scale(1.12);

	transform: scale(1.12);

}







figure.effect-chico figcaption::before {

	position: absolute;

	top: 30px;

	right: 30px;

	bottom: 30px;

	left: 30px;

   /*	border: 1px solid #fff; */

	content: '';

	-webkit-transform: scale(1.1);

	transform: scale(1.1);

}



figure.effect-chico figcaption::before,

figure.effect-chico p {

	opacity: 1;



}



figure.effect-chico h2 {

  	opacity: 1;

	padding: 20% 0 20px 0;

    	-webkit-transform: scale(1);

	transform: scale(1);

    	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

}

figure.effect-chico:hover h2 {

  	opacity: 0;

    	-webkit-transform: scale(1.5);

	transform: scale(1.5);



}

figure.effect-chico p {

	margin: 0 auto;

	  position: absolute;

  bottom: -25%;

  text-align: center;

  width: 100%;



}



figure.effect-chico:hover figcaption::before {

	opacity: 1;

	-webkit-transform: scale(1);

	transform: scale(1);



}

/*--------------------------------------------------

RESUME

--------------------------------------------------*/

#resume{ position: relative; background-color: #fff; }

.resume_img{

  float:right;

  width: 50%;

  background-image: url(pics/resume.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  margin-left: 50%;

  }

.resume_text{ float:left; width: 50%; text-align: right; padding:1% 3% 3% 10%; direction: rtl; line-height: 1.5; }

.resume_img img{width: 100%; display: block; }

.resume_text p{ padding: 0 2.5%; }

.resume_text h2{border-bottom:2px solid #1E8BC3; color: #1E8BC3; font-size: 1em; padding:10px; }

.resume_text h2 i{padding-left:10px;float: left;  padding-top: 5px; }

.resume_text p:first-child img{ position: relative; top:12px; }



/*--------------------------------------------------

COntact

--------------------------------------------------*/

#contact{ position: relative; background-color: #fff; }

.contact_img{ float:left; width: 50%; }

.contact_text{ float:right; width: 50%; text-align: right; padding:15% 10% 3% 3%; direction: rtl; line-height: 2; }

.contact_text i{ padding-left:20px; color: #666666; }

.contact_img img{width: 100%; display: block; }







/*--------------------------------------------------

PORTFOLIO

--------------------------------------------------*/

.work-wrapper{margin:0 auto; width:100%;  position: relative;}

#portfolio{  background-color: #e1e1e1; }
#media{  background-color: #e1e1e1; }

.work_holder{ padding-bottom:5%}
.work_holder.last{ padding-bottom:0}

.work_info { margin:3% 0; text-align: center; direction: rtl; color: #1e8bc3;}

.work_info p{ margin:0; }

.work_info h3{ padding-top:1.5%; }

.work_info a {

    display: block;

    padding:5px;

    text-decoration: none;

    color: #fff;

    border:1px solid #fff;

    background-color: transparent;

    -moz-transition: all .3s linear;

    -o-transition: all .3s linear;

    -webkit-transition: all .3s linear;

    transition: all .3s linear;

    max-width: 150px;

    text-align: center;

    margin-top:20px;

   }



.work_info a:hover { background-color: #fff; color: #2d2d2d; }

.work_pics img{ width: 100%; }
.work_pics{  display: flex; flex-wrap: wrap; }
.work_pics a{ width: 25%; display: block; padding:5px; }
.work_pics.col3 a { width: 33.3333%; display: block; padding:5px; }







.half_pic img { width: 50%; float:right; }



#more{  background-color: #1E8BC3; }



#landing_pages{ background-color: #B2B2B2; }



#logos .work_info{ color: #1E8BC3;  border-right: 3px solid #1E8BC3;}



.more_item{ float: right; width: 33.333%; padding: 2% 1.5%; }

.more_item img{

  width: 100%;

   outline: 3px solid  transparent;

  -moz-transition: all .3s linear;

    -o-transition: all .3s linear;

    -webkit-transition: all .3s linear;

    transition: all .3s linear;

    }

.more_item img:hover{ outline: 3px solid #fff;}



.more_item h3{ padding-top:1.5%; color: #fff; }

.more_item a.link {

    display: block;

    padding:5px;

    text-decoration: none;

    color: #fff;

    border:1px solid #fff;

    background-color: transparent;

    -moz-transition: all .3s linear;

    -o-transition: all .3s linear;

    -webkit-transition: all .3s linear;

    transition: all .3s linear;

    width: 60%;

    margin: 0 auto;

    text-align: center;

    margin-top:20px;

   }



.more_item a.link:hover { background-color: #fff; color: #2d2d2d; }



.cd-top {

  display: inline-block;

  height: 40px;

  width: 40px;

  position: fixed;

  bottom: 40px;

  right: 5%;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  color:#fff;

  font-size:1.66em;

  /* image replacement properties */

  overflow: hidden;

 /* text-indent: 100%; */

  white-space: nowrap;

  background: rgba(243, 38, 19, 0.9);

  visibility: hidden;

  opacity: 0;

  -webkit-transition: opacity .3s 0s, visibility 0s .3s;

  -moz-transition: opacity .3s 0s, visibility 0s .3s;

  transition: opacity .3s 0s, visibility 0s .3s;

}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {

  -webkit-transition: opacity .3s 0s, visibility 0s 0s;

  -moz-transition: opacity .3s 0s, visibility 0s 0s;

  transition: opacity .3s 0s, visibility 0s 0s;

}

.cd-top.cd-is-visible {

  /* the button becomes visible */

  visibility: visible;

  opacity: 1;

}

.cd-top.cd-fade-out {

  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */

  opacity: .5;

}

.no-touch .cd-top:hover {

  background-color: #f32613;

  opacity: 1;

  color:#fff;

}







/*--------------------------------------------------

media query

--------------------------------------------------*/

@media screen and (min-width:100px) and (max-width:559px) {

body{ font-size: 16px; }

h3{ font-size: .8em; font-weight: normal; }

#holder,#header,#footer{ width: 100%; clear:both; padding:0;}

#logo{ width: 100%; padding:1% 5%;}

figure.effect-chico h2{ padding:2.5%; font-size: 1.12em;  }

.grid figure {   margin: 10px 2.5%;  width: 28%;}

.grid figure p{ font-size: 45%; }

.resume_img{ display: none; }

.resume_text{ width: 100%; padding:1%; font-size: 110%; }

.work-wrapper{ width: 98%; }

.work_pics.col3 a,.work_pics a  { width: 100% }
#media .work_pics a{ width: 50%; }

.more_item{ width: 50%; }

.contact_img{ width: 40%; float:right; }

.contact_text{ width: 60%; padding: 5% 5% 3% 2%; float:left; }

.half_pic img { width: 100%; float:none; }





}

@media screen and (min-width:560px) and (max-width:959px) {

body{ font-size: 16px; }

.resume_img{  width: 40%; margin-left:60%; }

.resume_text{ width: 60%; padding:1% 1% 1% 3%; }

.work-wrapper{ width: 90%; }

.more_item{ width: 50%; }

}





@media screen and (min-width:960px) and (max-width:1024px) {

.resume_img{  width: 40%; margin-left:60%; }

.resume_text{ width: 60%; padding:1% 1% 1% 3%; }

.work-wrapper{ width: 80%; }

h3{ font-size: .9em; }

}



@media screen and (min-width:1025px) and (max-width:1200px) {

 .resume_text{ padding:1%; }

 .work-wrapper{ width: 80%; }

}



@media screen and (min-width:1201px) and (max-width:1400px) {

.work-wrapper{ width: 80%; }

}