/*
Theme Name: Optimus Prime
Theme URI: http://uffanahmed.com/
Author: Uffan Ahmed
Author URI: http://uffanahmed.com/
Description: <strong>About Theme:</strong>&nbsp;Optimus Prime name inspired by the Hollywood movie 'Transformers Age of Extinction' Robo name. This template is one page has elegant design&nbsp;&nbsp;<strong>About Developer:</strong>&nbsp;I’m an articulated, creative, self-motivated frontend and backend developer with good analytical skills. Having a hand-on experience of over 5 years in Android, JAVA, PHP, Databases, jQuery and CSS, I value and encourage early adaption of development techniques, team working, efficient completion of targets and professionalism. <br /><br />Working as a freelancer for over 11 years alongside my education and career I have managed to develop good leadership skills and a high level of proficiency in Web Application Development, Animation, 3D Modeling, VFX and Graphic Designing.&nbsp;&nbsp;<strong>Contact:</strong>&nbsp;Web: <a href="http://uffanahmed.com">www.uffanahmed.com</a>&nbsp;|&nbsp;Email: <a href="mailto:uffanahmed@gmail.com">uffanahmed@gmail.com</a><br /><br />
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: black, gray, white
Text Domain: Optimus Prime
Optimus Prime WordPress Theme © 2011-2020 UffanAhmed.com
Optimus Prime is distributed under the terms of the GNU GPL
*/

/* imports */
@import url('css/font.css');

/* reset elements */
body, html, ul, li, p, h1, h2, h3, h4, h5, h6 { margin:0px; padding:0px; }

/* basic elements */
html {  }
body {  }
body.backgroundCover { background: url(images/background/background3.jpg); background-size: cover; }
html, body { width:100%; height:100%; margin:0px; padding:0px; }
p { margin:20px 0 50px 0; }

ul#tiles>li { list-style:none; }

#loader { position:absolute; top:0; left:0; right:0; bottom:0; z-index:150; background:#000; }
#loader .loaderThumb { text-align:center; margin-top:100px; }
#loader .loadingText1 { color:#fff; font-family: 'Oswald', Tahoma; text-align: center; font-size:35px; padding:20px 0; }
#loader .loadingText2 { color:#fff; font-family: 'MyriadProLight', Tahoma; text-align: center; font-size:25px; }
#loader .loadingText2 .loadingLine2,
#loader .loadingText2 .loadingLine3 { display:none; }

#documentBody { background: url(images/header-gradient.png) repeat-x; overflow-y:scroll; position:fixed; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:100%; z-index:100; }

#backgroundTexture { z-index:-9; background: url(images/pattern.png) repeat; }
#backgroundLayer1 { z-index:-10; }
#backgroundLayer2 { z-index:-11; }

#workTitle { font-family: 'Oswald', Tahoma; font-size:20px; color:#fff; margin-left: 20px; text-shadow: 1px 1px 5px #000; }
#displayName { font-family: 'Oswald', Tahoma; font-size:40px; color:#fff; margin-left: 20px; text-shadow: 1px 1px 5px #000; }
#displayName2 { font-family: 'Oswald', Tahoma; font-size:20px; color:#fff; text-shadow: 1px 1px 5px #000; }
#displayName2Text { margin-left:0px; opacity:0; width:0px; height:35px; overflow:hidden; font-size:20px; }

#headerContainer { padding:20px; }
#headerContainer header { padding-bottom:40px; }
#headerContainer nav {  }
#headerContainer nav ul {  }
#headerContainer nav ul li { float: left; list-style: none; font-size:20px; }
#headerContainer nav ul li.link { cursor:pointer; border-right: 1px solid #ccc; padding:10px 25px; font-family: 'MyriadProLight', Tahoma; color:#fff; font-weight: bold; transition: all 600ms ease-in-out; text-shadow: 1px 1px 5px #000; }
#headerContainer nav ul li.link .label { padding: 0 1px 5px 1px; border-bottom: 2px solid rgba(8, 8, 8, 0.0);  transition: all 600ms; }
#headerContainer nav ul li.link:hover .label { border-bottom: 2px solid rgba(200, 200, 200, 1.0); }
#headerContainer nav ul li.link:hover, #headerContainer nav ul li.link.selected { color:#ccc; }
#headerContainer nav ul li.link.last { border-right:none; }
#headerContainer nav ul li.label {  }
#headerContainer nav ul li.link.invert {  }
#headerContainer nav ul li.link.selected .label { border-bottom: 2px solid rgba(200, 200, 200, 0.5); color: #fff; }

#bodyContainer { padding:20px; position:relative; }
/*#footerContainer { position:fixed; bottom:0; left:0; right:20px; height:40px; background:url(images/transparent-black-50.png); 
    font-family: 'MyriadProLight', Tahoma; color:#fff; }
#footerContainer .copyrights { padding:10px; text-align:left; font-size:13px; }
#footerContainer .social { padding:9px; text-align:right; }*/

/*
ul.thumbnailList { }
ul.thumbnailList li { float:left; width:200px; height:250px; border:1px solid #ccc; display:table-cell; overflow:hidden; position:relative; }
ul.thumbnailList li .thumbnailContent { position:absolute; top:0; left:0; right:0; bottom:0; z-index:10 }
ul.thumbnailList li .thumbnailContent:hover { background:url(images/pattern.png) repeat; }
ul.thumbnailList li .thumbnailContent .thumbnailTitle { position:absolute; z-index:11; bottom:0; left:0; right:0; height:50px; overflow:hidden; padding:5px; font-family: 'Oswald', Tahoma;
    border-top:1px solid #000; background:#ccc; color:#000; font-size:12px; line-height:22px;
    -webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both; animation:ease-in; -webkit-animation:ease-in; 
    animation-direction:normal; }
ul.thumbnailList li .thumbnailContent:hover .thumbnailTitle { height:80px !important; }
ul.thumbnailList li img { height:250px; vertical-align:middle; }
*/

/*.plain_text { font-family: 'MyriadProLight', Tahoma; color: #fff; font-size:18px; line-height:25px; }
.plain_text h1 { font-family: 'Oswald', Tahoma; color:inherit; padding:10px 0; }
.plain_text h2 { font-family: 'MyriadProLight', Tahoma; color:inherit; padding:10px 0; font-size:45px; }
.plain_text h3 { font-family: 'MyriadProLight', Tahoma; color:inherit; padding:10px 0; font-size:25px; }
.plain_text_highlight { font-family: 'MyriadProLight', Tahoma; color: #fff; font-size:25px; line-height:30px; }
.plain_text_highlight legend { font-size:55px; float:left; line-height:55px; padding-right:10px; height:55px; }*/

/*
.timeline { }
.timeline .tl_left { border-right:2px solid #fff; width:60px; position:relative; }
.timeline .tl_left .tl_marker { border-radius:100%; border:2px solid #fff; /*box-shadow:0 0 10px #000;*/ /*width:40px; height:32px; position:absolute; right:-24px; top:10px; background:#ccc; padding-top:8px; text-align:center; color:#555; font-size:15px; font-family: 'Oswald', Tahoma; }
.timeline .tl_left .tl_marker.dblTxt { padding-top:5px; line-height:15px; height:35px; font-size:12px; }
.timeline .tl_right { padding:0 0 40px 50px; }
.timeline .txt1 { font-size:25px; padding:5px 0; }
.timeline .txt2 { font-size:18px; padding:5px 0; color:#ccc; }
.timeline ul.lst li { list-style:square; margin-left:30px; line-height:20px; }
*/
.backgroundLayer { position:fixed; left:0; top:0; bottom:0; right:0; width:100%; height:100%; }
.highlightBackground { background: url(images/pattern.png) repeat; }
.page { display:none; position:absolute; width:100%; background: url(images/transparent-black-50.png); }
.page .pageContent { padding: 60px 60px; font-family: 'MyriadProLight', Tahoma; color: #fff; font-size:25px; line-height:30px; }
.page .pageContent legend { font-size:90px; float:left; line-height:62px; padding-right:10px; height:55px; margin-top:-5px; }
.page .pageContent p { }

.hide { display:none; }
.show { display:block; }
.widthFixed { width:1000px; }
.widthFull { width:100%; }
.alignCenter { margin-left:auto; margin-right:auto; }
.alignMiddle { vertical-align:middle; }
.alignTop { vertical-align:top; }
.cacheContent { display:none; }

.tbl { display:table; }
.tbl_cell { display:table-cell; vertical-align:top; }
.span01 { width:6.25%;  } .span02 { width:12.5%;  } .span03 { width:18.75%; }
.span04 { width:25%;    } .span05 { width:31.25%; } .span06 { width:37.5%;  }
.span07 { width:43.75%; } .span08 { width:50%;    } .span09 { width:65.25%; }
.span10 { width:62.5%;  } .span11 { width:68.75%; } .span12 { width:75%;    }
.span13 { width:81.25%; } .span14 { width:87.5%;  } .span15 { width:93.75%; }
.span16 { width:100%;   }

.gallery { margin: 0px 0px; }
.gallery .gallery_header {}
.gallery .gallery_header ul.gallery_menu_group { list-style: none; margin: 0 0 0 10px; padding: 0; }
.gallery .gallery_header ul.gallery_menu_group li { list-style: none; margin: 0; padding: 0; float: left; padding: 10px 20px; background: #bbb; cursor: pointer; font-family: 'MyriadProLight', Tahoma; transition: all 600ms; font-weight: normal; color: #000; font-size:20px; }
.gallery .gallery_header ul.gallery_menu_group li:hover { background: #fff; }
.gallery .gallery_content {}
.gallery .gallery_detail { }
.gallery .gallery_detail .gallery_detail_window { position: fixed; z-index: 200; left: 0; bottom: 0; right: 0; width: 100%; height: 0%; background: #fff; transition: all 600ms; }
.gallery .gallery_detail .gallery_detail_window.fullScreen { height: 100%; }
.gallery .gallery_detail .gallery_detail_window .content { width: 100%; height: 100%; }
.gallery .gallery_detail .gallery_detail_window .content .btn_close { position: absolute; top: 0; right: 0; padding: 10px; margin: 2px 15px 0 0; width: 32px; height: 32px; cursor: pointer; }
.gallery .gallery_detail .gallery_detail_window .content .btn_close:hover { background: #ccc; }
.gallery .gallery_detail .gallery_detail_window .content .content_frame { width: 100%; height: 100%; }
.gallery .gallery_content_nodes { list-style: none; margin: 0; padding: 0; }
.gallery .gallery_content_nodes .gallery_node { list-style: none; margin: 0; padding: 0; float: left; }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card { width:300px; height:240px; margin:10px; position: relative;
	/*background: url(images/transparent-white-50.png) repeat;*/ background: #fff; box-shadow: 0px 0px 10px #000; cursor: pointer;
	/*-moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;*/ }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_hover { z-index: 50; width: 280px; height: 85px; background: url(images/transparent-black-50.png) repeat; 
	position: absolute; top: 10px; left: 10px; right: 10px; text-align: center; padding-top: 50px; opacity: 0; transition: all 600ms; 
	/*-moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;*/  }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_hover img { width: 30px; }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_header { z-index: 40; width: 280px; height:135px; overflow: hidden; position: absolute; top: 10px; left: 10px; right: 10px;
	/*-moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;*/ }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_header img { width: 280px; transition: all 600ms; transform: scale(1.0); /*-moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;*/ }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_footer { z-index: 40; width: 280px; font-family: 'MyriadProLight', Tahoma; font-size: 15px; color: #fff;
	height: 85px; overflow: hidden; bottom: 10px; left: 10px; right: 10px; position: absolute; }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_footer .date_txt { color: #15505b; font-size: 20px; font-weight: bold; text-align: right; display:none; }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card .gnc_footer .title_txt { color: #000; font-size: 18px; padding: 10px 0; line-height: normal; }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card:hover .gnc_header img { transform: scale(1.4); }
.gallery .gallery_content_nodes .gallery_node .gallery_node_card:hover .gnc_hover { opacity: 1 }

.clear { clear:both; }

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}


.pageProfile { }
.pageProfile .thumbnail { margin: 20px 40px 0 0px; }
.pageProfile .detail { padding-right:100px; }
.pageProfile .detail .plain_text_highlight { text-shadow: 1px 1px 5px #000; }
.pageProfile a { color: #fff; text-decoration: none; border-bottom: 1px dashed #fff; padding: 0 0 5px 0; }
.pageContact .contactInfo { width: 550px; }
.pageContact .contactInfo .label { font-size:20px; }
.pageContact .contactInfo .text { font-size:20px; }
.pageContact a.social { margin-right: 10px; margin-bottom: 10px; float: left; text-decoration: none; display: block; }
.pageContact a.social.facebook 					{ background: url(images/social-icons/fb-color.png); width: 30px; height: 30px; }
.pageContact a.social.googleplus 				{ background: url(images/social-icons/gplus-color.png); width: 30px; height: 30px; }
.pageContact a.social.instagram 				{ background: url(images/social-icons/insta-color.png); width: 30px; height: 30px; }
.pageContact a.social.linkedin 					{ background: url(images/social-icons/linkedin-color.png); width: 30px; height: 30px; }
.pageContact a.social.pinterest 				{ background: url(images/social-icons/pinterest-color.png); width: 30px; height: 30px; }
.pageContact a.social.twitter 					{ background: url(images/social-icons/twitter-color.png); width: 30px; height: 30px; }
.pageContact a.social.github 					{ background: url(images/social-icons/github-color-small.png); width: 30px; height: 30px; }
.pageContact a.social.yiiframework 				{ background: url(images/social-icons/yiiframework-color-small.png); width: 28px; height: 30px; }
.pageContact a.social.stackoverflow 				{ background: url(images/social-icons/stackoverflow-color-small.png); width: 24px; height: 30px; }



.gform_body {}
.gform_body .gform_fields { list-style: none; padding: 0; margin: 0; }
.gform_body .gfield { list-style: none;  padding: 0; margin: 0; display:table; }
.gform_body .gfield .gfield_label { width: 100px; font-size: 17px; vertical-align: top; padding-top: 8px; display:table-cell; }
.gform_body .gfield .ginput_container { display:table-cell; }
.gform_body .gfield .ginput_container input[type="text"], .form .gfield textarea { 
	background: none; border: 1px #fff solid; margin: 3px 0; font-size: 17px;
	padding: 6px; color: #fff; font-family: 'MyriadProLight', Tahoma; width: 300px;
	/* Fix for Chrome */
	outline: none; outline-offset: 0px; 
	background: none !important;
	-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset; 
	-webkit-text-fill-color: none !important; 
}
.gform_body .gfield textarea { height: 100px; max-height: 100px; max-width: 300px; }
.gform_footer { margin-left:100px; margin-top:5px; }
.gform_footer input[type="button"], .gform_footer input[type="submit"] { border: 1px solid #fff; background: none; font-size: 16px; color: #fff; padding: 10px 30px; transition: all 600ms; cursor: pointer; }
.gform_footer input[type="button"]:hover, .gform_footer input[type="submit"]:hover { background: #ccc; box-shadow: 0px 0px 10px #000; color:#333; }

.formData .tbl { margin-bottom: 10px; }
.formData .tbl .label { width: 200px; vertical-align: top; }
.formData .tbl .text {  }

/* Post */
.post { width: 100%; height: 100%; background: #fff; padding: 80px 0 100px 0; }
.post .post_page { width: 1000px; margin: 0 auto; }
.post .post_page h1 { font-family: 'MyriadProLight', Tahoma; font-size: 45px; color: #333; border-bottom: 2px solid #333; padding-bottom: 20px; font-weight: normal; }
.post .post_page .date { font-family: 'MyriadProLight', Tahoma; font-weight: bold; text-align: right; font-size: 20px; }
.post .post_page .post_content    { font-family: 'MyriadProLight', Tahoma; font-size: 20px; color: #000; padding: 50px 0; margin: 0; font-weight: bold; text-align: left; }
.post .post_page .post_content h1 { font-family: 'MyriadProLight', Tahoma; font-size: 38px; color: #333; padding: 20px 0; margin: 0; font-weight: bold; border-bottom: none; }
.post .post_page .post_content h2 { font-family: 'MyriadProLight', Tahoma; font-size: 34px; color: #333; padding: 18px 0; margin: 0; font-weight: bold; border-bottom: none; }
.post .post_page .post_content h3 { font-family: 'MyriadProLight', Tahoma; font-size: 30px; color: #222; padding: 16px 0; margin: 0; font-weight: bold; border-bottom: none; }
.post .post_page .post_content h4 { font-family: 'MyriadProLight', Tahoma; font-size: 27px; color: #111; padding: 14px 0; margin: 0; font-weight: bold; border-bottom: none; }
.post .post_page .post_content h5 { font-family: 'MyriadProLight', Tahoma; font-size: 22px; color: #111; padding: 12px 0; margin: 0; font-weight: bold; border-bottom: none; }
.post .post_page .post_content h6 { font-family: 'MyriadProLight', Tahoma; font-size: 20px; color: #000; padding: 10px 0; margin: 0; font-weight: bold; border-bottom: none; }
.post .post_page .post_content p  { font-family: 'MyriadProLight', Tahoma; font-size: 20px; color: #000; padding: 10px 0; margin: 0; font-weight: bold; text-align: left; }
.post .post_page img { margin: 30px 0; width: 1000px; max-width: 1000px; }
.post .post_page a { text-decoration: none; border-bottom: #fff 1px solid; padding-bottom: 3px; transition: all 600ms; color: #666; margin: 0 10px; font-weight: bold; }
.post .post_page a:hover { color: #15505b; border-bottom: #15505b 1px solid; }
.post .post_page .video { margin: 30px 0; width: 1000px; max-width: 1000px; }
.post .post_page ul { margin-left:50px; }
.post .post_page .post_footer { padding: 30px 0 50px; margin-top: 80px; border-top: 2px solid #999; font-family: 'MyriadProLight', Tahoma; font-size: 20px; color: #666; font-weight: bold; }



/*ul#tiles { margin:0 0; }
ul#tiles li { width:800px; height:200px; margin:10px auto; background:#333; list-style:none; opacity:0; }*/