@charset "utf-8";

/*-------------------DOCUMENT------------------*/

*{
	margin:0; 
	padding:0; 
	text-decoration:none; 
	border:none;
	font-family: 'Exo 2', sans-serif;
}

input, textarea:focus{
	outline-color:#bcbcbc;
}

body{
	background-color:#e4e6e5;
	overflow-x: hidden;	
	overflow-y: scroll;	
}


.color_teal{color: #1a99aa;}
.color_green{color: #409f89;}
.color_orange{color: #df6c4f;}

.devider_v{
	width:0;
	border-right: 1px solid #ffffff;	
	border-left: 1px solid #bcbcbc;	
	height: 100%;
}

.devider_v.right{float:right;}
.devider_v.left{float:left;}

.no_select {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.bottom_padder{
	width:100%;
	height:20px;
	position:relative;	
	pointer-event:none;
}

#items_padder{
	position:absolute;
	top:0;
	left:0;	
}

.clear_float{
	clear: both;
    float: none;
}

/*-------------------PRELOADER------------------*/
.preloader{
	position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh);
    background-color: #e4e6e5;
    transition: opacity 0.5s linear;
    pointer-events: all;
}

.wrapper .preloader{
	position:fixed;
}

.wrapper .screen .preloader{
	position:absolute;
}

.preloader img{
	position:absolute;
	top: 46%; 
	left: 50%;
	transform:translate(-50%,-50%);
	width: 140px; 
	max-width:50%;
	opacity:0.4;
	height:auto;
}

.preloader.removed{
	opacity:0;
	pointer-events: none;
}

/*-------------------HEADER------------------*/

#header{
	position:fixed;
	width:100%;
	height:65px;
	top:0;
	left:0;
	z-index:1000;
	border-bottom:#bcbcbc 1px solid;
	background-color:#e4e6e5;
}

#header .logo{
	height: 105px;
	width: 105px;
    float: left;
    background-color: #e4e6e5;
    border-right: 1px solid #bcbcbc;
	cursor: pointer;
}

.size-sm #header .logo{
	height: 65px;
    width: 20%;
    text-align: center;
    border-right: none;
}

#header .logo img{
	padding: 10% 12% 10% 10%;
    height: 80%;
    width: auto;
}

.size-sm #header .logo img{
	height: 50px;
	width: auto;
    margin-top: 8px;
	padding: 0;
}

#header .header_title{
	margin-left: 20px;
    line-height: 65px;
    font-weight: normal;
    font-size: 26px;
    float: left;
}

.size-md #header .header_title,
.size-sm #header .header_title{
	display:none;
}

#header .header_item{
	position:relative;
	float:right;
	width:74px;
	height:100%;
	transition: all 0.1s linear;
}

.size-sm #header .header_item{
	height: 65px;
    width: calc(20% - 2px);
    text-align: center;
}

#header .header_item img{
	width:40px;
	height:auto;
	margin-left:36px;
	margin-top:33px;
	transform:translate(-50%,-50%)
}

.size-sm #header .header_item img{
	height: 62%;
	width: auto;
    margin-left: 0px;
    margin-top: 33px;
    transform: translate(0,-50%);
}

#header .header_item img.has_text{
	margin-top:26px;
}

.size-sm #header .header_item img.has_text{
    height: 58%;
    margin-top: 25px;	
}

#header .header_item.btn_icon{
	cursor:pointer;
}

#header .header_item.btn_icon:hover,
#header .header_item.btn_icon.down{
	background-color:#fff;
}

#header .icon_text{
	width:100%;
	text-align:center;
	color:#808080;
	font-weight:normal;
	font-size:16px;
	margin-top:-20px;
}

.size-sm #header .icon_text{
	margin-top:-27px;	
}

#header #header_icon_title{
	height:100%;
	width:auto;
	padding-right:20px;
	line-height:65px;
	font-size:16px;
	float:right;
	color:#888;
}

.size-sm #header #header_icon_title{
	display:none;	
}

/*-------------------NAV BAR------------------*/

#nav_bar{
	padding-left: 105px;
    width: calc(100% - 105px);
    height: 40px;
    position: fixed;
	z-index:999;
    margin-top: 65px;
    border-bottom: #bcbcbc 1px solid;
    background-color: #e4e6e5;
    list-style: none;
    font-size: 0;
	text-align:center;
}

.size-sm #nav_bar{
	padding-left: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

#nav_bar li{
	cursor:pointer;
	padding:0px 25px;
	font-size:15px;
	vertical-align:middle;
	line-height:40px;
	color:#333;
	transition: all 0.1s ease-in-out;
	display:inline-block;
}

.size-md #nav_bar li{
	padding:0px 17px;
}

.size-sm #nav_bar li{
	padding:0px 15px;
}

#nav_bar li.devider_v{
	padding:0;
	height:40px;
}

#nav_bar_list{
	width: 100%;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

.mobile #nav_bar_list{
	overflow-x: scroll;
	overflow-y: hidden;
}

#nav_bar li:hover,
#nav_bar li.active{
	background-color:#fff;
	color:#df6c4f;
}

/*-------------------CONTENT------------------*/

#content{
	position:relative;
	width:94%;
	margin:0 auto;
	
}

#content_padder{
	height:105px;
	width:100%;
	position:relative;
}

#exitPageBtn{
	position:absolute;
	top: 5px;
    right: calc(-3% + 3px);
    width: 56px;
    height: 56px;
	transition: all 0.4s ease-in-out;
}

#exitPageBtn.out{
	right:calc(-4% - 56px)	
}

/*-------------------PAGES------------------*/

#content .page{
	position:absolute;
	top:-800px;
	left:0;
	width:100%;
	opacity:0;
	transition: all 0.4s ease-in-out;
	pointer-events:none;	
}

#content .page.active{
	top:30px;
	opacity:1;
	pointer-events:all;
}

/*-------------------ITEMS------------------*/


#items_container .item{
	width:300px;
	height:300px;
	overflow:hidden;
	position:absolute;
	text-align:center;
	cursor:pointer;
	
	transition: all 0.35s ease-in-out;
	-webkit-box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.5);
}

##items_container .item.hide{
	opacity:0;
	pointer-events:none;
}

#items_container .item:hover{
}

#content .item img{
	width:100%;
	height:100%;
	display:block;
	position:relative;	
	transition: all 0.3s ease-in-out;
}

#content .item:hover img { 
    transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
} 

#content .item .mask{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;	
	opacity: 0;
    background-color:rgba(223,108,79,0.9);
    transition: all 0.3s ease-in-out;
}

#content .item:hover .mask { 
    opacity: 1;
}

.mobile #content .item .mask{
	opacity: 1;
	background-color:rgba(0,0,0,0);
}

#content .item .mask h2{
	color:#fff;
	text-align:center;
	position:relative;
	font-size:20px;
	padding:3%;
	width:94%;
	background-color:rgba(30,30,30,0.8);
	margin:0;
	margin-top:3%;
    opacity: 0;
	transform:translateY(-100%);
    transition: all 0.2s ease-in-out;
}

.mobile #content .item .mask h2{
	opacity: 1;
	margin-top:0%;
	transform:translateY(0%);
	font-weight: normal;
	font-size:16px;
}

#content .item .mask p{
	font-style:italic;
	font-size:16px;
	position:relative;
	color:#fff;
	padding:10px 6% 6%;
	margin-top:3%;
	text-align:center;
	bottom:0;	
	width:88%;
    opacity: 0;
	transform:translateY(100%);
    transition: all 0.2s ease-in-out;
}

.mobile #content .item .mask p{
	display:none;
}

#content .item:hover p,
#content .item:hover h2{
    opacity: 1;
    transform:translateY(0%);
	transition-delay: 0.1s;
}

/*-------------------Contact------------------*/

#contact_container{}

#contact_container .inner_container{
	position:relative;
	width:100%;
	max-width:450px;
	margin:0 0;	
}

#contact_container h1,
#contact_container h2,
#contact_container h3,
#contact_container h4{
	margin:5px 0px;
	font-weight:normal;
	color:#333333;
}

#contact_container h1{
	font-size:30px;
}

#contact_container h2{
	font-weight:normal;	
}

#contact_container h3{
	font-size:18px;
}

#contact_container h4{
	font-size:18px;
}

#contact_container .social{
	margin:20px 0px;
}

#contact_container .social img{
	cursor:pointer;
	opacity:0.8;
	transition: all 0.10s ease-in-out;
}

#contact_container .social img:hover{
	opacity:1;
}


#contact_container #contact_section{
	font-size:18px;
	width:100%;
	position:relative;
}

#contact_container #contact_section #contact_form{
	width:100%;
}

#contact_container #contact_section #contact_social{
	width: 100%;
    padding-bottom: 20px;
    color: #409f89;
}

#contact_container #contact_section #contact_form ul{list-style:none;}
#contact_container #contact_section #contact_form ul li{margin-bottom:25px;}
.mobile #contact_container #contact_section #contact_form ul li{margin-bottom:12px;}
#contact_container #contact_section #contact_form ul li label{width:80px;}

input,textarea{
	width:74%;
	float:right;
	padding:7px;
	margin-top:-3px;	
}

.mobile input, .mobile textarea {
    width: calc(100% - 14px);
    float: none;
    margin-top: 9px;	
}

input#name{border-bottom:2px #1a99aa solid;}
input#mail{border-bottom:2px #409f89 solid;}
input#submit{
	border-bottom:2px #df6c4f solid; 
	margin-top:15px; 
	background-color:#fff;
	width:30%;
	transition: all 0.10s ease-in-out;
}

input#submit:disabled{
	visibility:hidden;
}

input#submit:hover{
	border-bottom:2px #fff solid; 
	background-color:#df6c4f;
	color:#fff;
	cursor:pointer;
}

.mobile input#submit{
	width: 100%;	
}

textarea{
	border-bottom:2px #ecd06f solid;
	height:300px;
}


/*-------------------ABOUT------------------*/

#about_container{
	position:absolute;
	width:100%;
	max-width:500px;	
	color:#4d4d4d;	
}

#about_container h1{
	font-size:30px;
	font-weight:normal;
	margin-bottom:15px;
	border-bottom:2px solid #df6c4f;
	padding-bottom:3px;
	width:95%;
}

#about_container #skills_title{
	border-bottom:2px solid #1a99aa;
	margin-top:50px;
}

#about_container p{
	font-size:16px;
	padding-right:25px;
	line-height:1.5em;
}

#about_container .skill{
	width: 50%;	
}

#about_container .grade{
	width: 20%;
}

#about_container .full_bar{
	background-color:#1a99aa;
	height:15px;
	float:left;
	padding-top:2px;
}

#about_container .empty_bar{
	background-color:#aaa;
	height:15px;
	float:left;
	padding-top:2px;
}

/*-------------------SCREENS------------------*/

.screen{
	
}

.screen .screen_inner{
	position:relative;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.screen .screen_background{
    width: 100%;
    height: auto;
}

.screen .images_container{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 0%;
    height: 0%;
	overflow:hidden;
    background-color: beige;
}

#pc_container.screen .images_container,
#pc_container.screen .preloader{
	top: 8.6%;
    left: 5%;
    width: 90.3%;
    height: 67.4%;
}

#app_container.screen .images_container,
#app_container.screen .preloader{
    top: 7.9%;
    left: 15.7%;
    width: 69.1%;
    height: 81.2%;
}

#mobile_container.screen .images_container,
#mobile_container.screen .preloader{
    top: 15.2%;
    left: 15.3%;
    width: 66.1%;
    height: 68.7%;
}

.screen .images_container .item_img{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
}


.screen .media_info{
	position:absolute;
	top:0;
	left:0;
	z-index:15;
	width:calc(100% - 30px);
	padding:15px;
	background-color:#fff;	
	border-bottom:2px solid #777;
	text-align:left;
	transition: all 0.25s ease-in-out;
	transform: translateY(-100%);
}

.screen .media_info h3{
	margin-bottom:7px;	
	color:#df6c4f;
	width:90%;
}

.screen .media_info p{
	width:90%;
}

.screen .media_info a{
	text-decoration:none;
	color:#999;
	font-size:20px;
}

.screen .media_info a:hover{
	color:#333;
}

.screen .media_info a div{
	margin-top:10px;
}

.screen .images_container:hover .media_info{
	transform: translateY(0%);
}


.screen .left_arrow,
.screen .right_arrow,
#exitPageBtn .x_btn{
	position: absolute;
    top: 67%;
    width: 50px;
    height: 50px;
    border: 2px solid #b3b3b3;
    cursor: pointer;
    z-index: 100;
    overflow: hidden;
    -moz-border-radius: 999px;
    -webkit-border-radius: 999px;
    border-radius: 999px;
    background-color: rgba(228, 230, 229, 0.9);
}

#exitPageBtn .x_btn{
	top: 0;	
}

.screen .left_arrow div,
.screen .right_arrow div,
#exitPageBtn .x_btn div{
	position: absolute;
    width: 0;
    height: 0;
    left: 22px;
    top: 22px;
    background-color: #e4e6e5;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    -moz-border-radius: 999px;
    -webkit-border-radius: 999px;
    border-radius: 999px;
}

.screen .left_arrow p,
.screen .right_arrow p,
#exitPageBtn .x_btn p{
	position: absolute;
    width: 50px;
    color: #656565;
    text-align: center;
    font-size: 36px;
    line-height: 46px;
}

#exitPageBtn .x_btn p{
	font-size: 26px;	
	line-height: 48px;
}

.screen .left_arrow:hover p,
.screen .right_arrow:hover p,
#exitPageBtn .x_btn:hover p{
	color:#fff;
}

.screen .left_arrow:hover div,
.screen .right_arrow:hover div,
#exitPageBtn .x_btn:hover div{
	width:50px;
	height:50px;
	left:0px;
	top:0px;
	background-color:#df6c4f;
}

.screen .left_arrow{left:6%;}
.screen .right_arrow{right:6%;}

#app_container.screen .left_arrow{left:4%;}
#app_container.screen .right_arrow{right:4%;}
#app_container.screen .left_arrow,
#app_container.screen .right_arrow{top:80%;}

#mobile_container{text-align: center;}
#mobile_container.screen .screen_inner{    
	max-height: calc(100vh - 200px);
    text-align: center;
    display: inline-block;
    width: auto;
}
#mobile_container.screen .screen_background{
	max-width: 100%;
    max-height: calc(100vh - 200px);
    height: auto;
    width: auto;
}
#mobile_container.screen .left_arrow{left:13.5%;}
#mobile_container.screen .right_arrow{right:15%;}
#mobile_container.screen .left_arrow,
#mobile_container.screen .right_arrow{top:88%;}

.screen .images_container .item_img.insert_from_left{
	-webkit-animation: slide_in_left 0.5s ease 0.05s forwards;
       -moz-animation: slide_in_left 0.5s ease 0.05s forwards;
         -o-animation: slide_in_left 0.5s ease 0.05s forwards;
            animation: slide_in_left 0.5s ease 0.05s forwards;
}

.screen .images_container .item_img.remove_to_left{
	-webkit-animation: slide_out_left 0.5s ease 0.05s forwards;
       -moz-animation: slide_out_left 0.5s ease 0.05s forwards;
         -o-animation: slide_out_left 0.5s ease 0.05s forwards;
            animation: slide_out_left 0.5s ease 0.05s forwards;
}

.screen .images_container .item_img.insert_from_right{
	-webkit-animation: slide_in_right 0.5s ease 0.05s forwards;
       -moz-animation: slide_in_right 0.5s ease 0.05s forwards;
         -o-animation: slide_in_right 0.5s ease 0.05s forwards;
            animation: slide_in_right 0.5s ease 0.05s forwards;
}

.screen .images_container .item_img.remove_to_right{
	-webkit-animation: slide_out_right 0.5s ease 0.05s forwards;
       -moz-animation: slide_out_right 0.5s ease 0.05s forwards;
         -o-animation: slide_out_right 0.5s ease 0.05s forwards;
            animation: slide_out_right 0.5s ease 0.05s forwards;
}

.screen .images_container .item_img.left{
	transform:translateX(-100%);
}

.screen .images_container .item_img.right{
	transform:translateX(100%);
}

@-webkit-keyframes slide_in_left {0%{transform:translateX(-100%);} 100%{transform:translateX(0%);}}
@-moz-keyframes slide_in_left {0%{transform:translateX(-100%);} 100%{transform:translateX(0%);}}
@-o-keyframes slide_in_left {0%{transform:translateX(-100%);} 100%{transform:translateX(0%);}}
@keyframes slide_in_left {0%{transform:translateX(-100%);} 100%{transform:translateX(0%);}}

@-webkit-keyframes slide_out_left {0%{transform:translateX(0%);} 100%{transform:translateX(-100%);}}
@-moz-keyframes slide_out_left {0%{transform:translateX(0%);} 100%{transform:translateX(-100%);}}
@-o-keyframes slide_out_left {0%{transform:translateX(0%);} 100%{transform:translateX(-100%);}}
@keyframes slide_out_left {0%{transform:translateX(0%);} 100%{transform:translateX(-100%);}}

@-webkit-keyframes slide_in_right {0%{transform:translateX(100%);} 100%{transform:translateX(0%);}}
@-moz-keyframes slide_in_right {0%{transform:translateX(100%);} 100%{transform:translateX(0%);}}
@-o-keyframes slide_in_right {0%{transform:translateX(100%);} 100%{transform:translateX(0%);}}
@keyframes slide_in_right {0%{transform:translateX(100%);} 100%{transform:translateX(0%);}}

@-webkit-keyframes slide_out_right {0%{transform:translateX(0%);} 100%{transform:translateX(100%);}}
@-moz-keyframes slide_out_right {0%{transform:translateX(0%);} 100%{transform:translateX(100%);}}
@-o-keyframes slide_out_right {0%{transform:translateX(0%);} 100%{transform:translateX(100%);}}
@keyframes slide_out_right {0%{transform:translateX(0%);} 100%{transform:translateX(100%);}}