@charset "utf-8";
/* CSS Document dark: #243842  Blue #84D6F0 green #1BBC9B grey #63768D off-white #FCFCFC red #FDB900*/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,500,700');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700');

*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{margin:0;padding:0;background-color:#FCFCFC;}

html{font-family: 'Roboto', sans-serif; color: #2F3335; text-decoration: none;font-size:14px;color:#243842;font-weight:300;font-size:18px;}

img{max-width:99%;border:none;}
a{cursor:pointer;
  -webkit-appearance: none;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;}
p{text-align:justify;}
ul{list-style-type: none;}

*:focus {outline: 0;}
input[type="submit"] {
    -webkit-appearance: none;
	cursor:pointer;
}
h1,h3,h4{color: ;line-height:1.5;}

h1{font-size:30px; font-weight:300;padding:10px 0;margin:10px 0;font-family: 'Ubuntu', sans-serif;}
h2{font-size:25px;font-weight:700;font-family: 'Ubuntu', sans-serif;}
h2 span{border-top:1px solid #FCFCFC;font-size:25px;font-weight:100;font-family: 'Roboto', sans-serif;}
h3{font-size:25px;font-weight:300; font-family: 'Ubuntu', sans-serif;}
h4{font-size:25px;font-weight:300;}
h5{font-size:25px;font-weight:300;}

.sub_heading{font-size:20px;padding:10px 0 20px 0;text-align:justify;}
.no_pad{padding:0;margin:0;}
.pad{padding:10px 2% 10px 2%;}
.pad_top{padding-top:10px;}
.pad_bottom{padding-bottom:10px;}
.margin_top{margin-top:10px;}
.margin_bottom{margin-bottom:10px;}
.margin_left{margin-left:10px;}
.margin_right{margin-right:10px;}
.no_top_margin{margin-top:0;}

.text_10{font-size:10px}
.text_12{font-size:12px;}
.text_14{font-size:14px;}
.text_16{font-size:16px;}
.text_18{font-size:18px;}
.text_20{font-size:20px;}
.text_22{font-size:22px;font-weight:lighter;}
.text_30{font-size:30px;font-weight:lighter;}
.align_left{text-align:left;}
.align_right{text-align:right;}
.align_center{text-align:center;}
.justify{text-align:justify;}

.bold{font-weight: 500;}
.italic{ font-style:italic;}

.float_left{float:left;}
.float_right{float:right;}

.border{border:2px solid #243842;}

a{color:#1F9984;text-decoration:none;}
a:link{
  color:#1F9984;text-decoration:none;
  -webkit-appearance: none;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
a:visited{color:#1F9984;text-decoration:none;}
a:hover{color:#FF3366}

.line{border:1px #84D6F0 solid;}
.blue_line{border:1px #84D6F0 solid;}
.grey_line{border:1px #D6D6D6 solid;}
.white_line{border:1px #FCFCFC solid;}
.green_line{border:1px #1BBC9B solid;}

.no_pad{margin:0;padding:0;}

.bg_blue{background-color:#84D6F0;}
.bg_green{background-color:#1BBC9B;}
.bg_white{background-color:#FCFCFC;}

.overflow_hidden{overflow:hidden;}

.clear_both{clear:both;}

hr{border:#FCFCFC solid 1px;}

/**************** Header ************************************/
#header_container{width:100%;background-color:#243842;margin:0;padding:0;font-weight:400;}
.header_content{width:100%;max-width:1100px;margin:auto;overflow:hidden;}

.nav_header{font-size:18px;margin:5px 0 5px 0;color:#84D6F0;}

/*
 * html <span href="#" class="action %closer%"></span>
 * result: https://jsfiddle.net/denisnarush/nz4chsaf/
*/
.topBar{z-index: 999999999;position:fixed;top:0;text-align:right;width:100%;max-height:60px;}
.topBar span{padding:10px;}
.action{
  display: inline-block;
  font-size: 0;
  width: 3.2rem;
  height: 3rem;
  color: #FCFCFC; /* icon color */
  -webkit-appearance: none;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	cursor:pointer;

}
.easing{  -webkit-appearance: none;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;}

.action:hover{color: #FF3366;}
.aboutAction{color: #FDB900;}

.action:before,
.action:after{
  content: '';
  display: block;
  box-sizing: border-box;
  border-top: 2px solid;
  border-bottom: 2px solid;
  transition: transform 0.125s;
  width: 100%;
  height: calc(50% + 1px); /* 0.5 x of border width */
}

.action:before{
  margin-bottom: -2px; /* 1 x of border width */
}

.closer:before,
.closer:after{
  height: 0;
  transform-origin: calc(50% - 1px) 50%; /* 0.5 x border withd */
}
.closer:before{
  margin-top: calc(50% - 3px); /* 1.5 x border withd */
  transform: rotate(45deg) scale(1.25, 0.5);
}
.closer:after{
  transform: rotate(-45deg) scale(1.25, 0.5);
}

/*NAV*/
#menuframe, #menu{display:none;overflow-x:hidden}
#menu{background-color:#243842;
  width:100%;
  color:#FFFFFF;
  margin:0;
  padding:60px 0 50px 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width:350px;
  height: 100%;
  z-index: 10;
  border-left:2px #4E6272 solid;
}

#menuframe ul{list-style: none; list-style-position: inside; list-style-type: none;padding:0;margin:0;}

#menuframe{background-color:#243842;color:#FCFCFC;font-size:16px;margin:0;padding:5px 0 5px 0;text-transform: uppercase;}
#menuframe a:link{color:#FCFCFC;}
#menuframe a{color:#FCFCFC; }
#menuframe a:visited{color:#FCFCFC;}
#menuframe a:hover{}
#menuframe div{padding:5px 3% 5px 3%;}
#menuframe div a{color:#FCFCFC;}
#menuframe div:hover{background-color:#FF3366;}
#menu{overflow:hidden;}

#menuframe .sub-menu{color:#84D6F0;padding:3px;}
#menuframe .sub-menu:hover{background-color:#84D6F0;color:#FCFCFC;}

.main_container{width:100%;overflow:hidden;color:#243842;font-weight:300;}
.container{width:100%;max-width:1100px;margin:auto;padding:0 0 30px 0;overflow:hidden;}

.contact{font-size:22px;text-align:center;}

/****************FOOTER ********************************/
.topIcon{display:none;position:fixed;right:20px;font-size:40px;bottom:20px;color:#243842;z-index:999999;text-align:center;width:40px;height:40px;}
.topIcon:hover{color:#FF3366;}
#footer_container{width:100%;background-color:#243842;margin:0;padding:0;overflow:hidden;min-height:80px;}
#footer_content{padding:20px 2% 10px 2%;color:#D3E7F1;width:100%;max-width:1100px;margin:auto;}
.mobile_footer {width:100%;min-height:60px;display:none;}
.footer_button{width:25%;float:left;text-align:center;overflow:hidden;padding:5px 0 5px 0;margin-bottom:10px;}
.footer_button:hover{background-color:#84D6F0;}
.footer_mobile_text{color:#FCFCFC;font-size:12px;padding:60px 15% 5px 15%;text-align:center;}

#footer_container a{text-decoration:none;color:#FCFCFC;}
#footer_container a:visited{text-decoration:none;color:#FCFCFC;}
#footer_container a:hover{text-decoration:none;color:#1BBC9B;}
#footer_container .line{border:1px #243842 solid;}

.footer_images_cont {width:100%;overflow-x: scroll;}
.footer_images {width:2600px;left:-50%;}
.footer_images img{width:250px;margin:0 5px 0 ;float:left;}


ul{ list-style-type:circle; list-style-position: outside;}
/**************** INDEX ********************************/

.top_image{min-height:450px;}
#top_background img{width:98%;max-width:900px;}

/*************************************forms ***********/

.has-error input{border-color:#FDB900;}.has-success input{border-color:#91CE00;}.control-label{color:#FF0000;}label{display:block;}

.plus600{display:inherit;}

#top_background{
  margin: 0;
  background: #84D6F0; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top, #84D6F0 , #1BBC9B); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, #84D6F0, #1BBC9B); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, #84D6F0, #1BBC9B); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, #84D6F0 , #1BBC9B); /* Standard syntax */
  /*background-size: cover;*/
  overflow:hidden;
}
video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity:0.2;
}
#top_background #topCont {
  width:100%;
  opacity:1;
  z-index: 1 !important;
  max-width:700px;
  top:35%;
  position: absolute;
  margin: 0 auto;
  left:0;
  right:0;
  overflow:hidden;
}
/*
header {
  position: fixed;
  width: 100%;
  text-align: center;
  color: white;
  transition: .4s;
}
header:hover {
  background: rgba(255,255,255,0.8);
  color: #000;
}
*/

.container {
	overflow: hidden;
	/* we don't want the pseudo-elements sticking out */
}

.container svg {
	display: block;
}

section {
	position: relative;
	padding: 10em 10%;
	/*background: #84D6F0;*/
	color: #fff;
	text-align: center;
}

section h2 {
	margin: 0;
	padding: 0;
	font-size: 2.8em;
	font-weight: 400;
}

section p {
	color: rgba(0,0,0,.5);
	font-size: 1.3em;
	line-height: 1.5;
}


button{
  -webkit-appearance: none;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
  padding:10px 4% 10px 4%;
  cursor:pointer;
}

.avatarCont, .topText{ width:30%;float:left;text-align:center;}
.topText{width:70%;}

.topText button{margin-top:20px;font-size:16px;font-weight:300;color:#FCFCFC;border:1px solid #FCFCFC;background-color:transparent;border-radius:5px;

}
.topText button:hover{background-color:#FF3366;color:#FCFCFC;}

#top_background h1 {
  text-align: center;
  width: 100%;
  letter-spacing: .5rem;
  color:#FCFCFC;
  padding:0;
  margin:0;
  font-size:35px;
  font-family: 'Ubuntu', sans-serif !important;
}

#top_background hr {
  width:95%;
  opacity:0.5;
  max-width:300px;
}
#topCont h2 {
  text-align: center;
  margin: 0;
  padding-top:10px;
  /*mix-blend-mode: overlay;*/
  color: #FCFCFC;
  font-weight: 100;
  opacity:1;
  font-size:30px;
  letter-spacing: .5rem;
  font-family: 'Roboto', sans-serif;
}

.avatar_image{
  border:3px solid #FCFCFC;border-radius:50%;width:100%;width:200px !important;height:200px;margin:auto !important;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.fullCont{width:100%;overflow:hidden;}
.main_container h3{font-size:30px;font-weight:300; margin-bottom:20px; font-family: 'Ubuntu', sans-serif;letter-spacing: .5rem;}
.skillsCont{padding-top:40px;}
#skills h3,#education h3,#projects h3{color:#FCFCFC;}
.skillsCircle p, .otherSkills p {color:#FCFCFC;text-align:center;padding-top:10px;margin-top:0;}
.otherSkills {overflow:hidden;}
.otherSkills h4{color:#FCFCFC;padding-bottom:0;margin-bottom:5px;}
.exp .bold{padding-top:20px;}
.exp, .pro{padding-top:10px;}
.otherExp,.conCont{padding-top:40px;}
.otherExp span, .edu span, .ach span, .pro span, .conCont span{font-weight:500;}
.conCont, .conCont p{text-align:center;}
.iconsCont{font-size:60px;}
.otherExp p{font-size:18px;}
#about hr, #skills hr, #experience hr, #education hr{max-width:400px;margin:auto;}
#education{padding-top:0;margin-top:-6px;}
.edu{padding-top:40px;}
.edu p, .pro p{color:#FCFCFC;}
.pro{text-align:left;}
.pro h5{color:#FCFCFC;font-weight:500;}
.pro a:link{color:#FCFCFC;}
.pro a:visited{color:#FCFCFC;}
.pro a:hover{color:#FF3366;}
.proLink{text-align:right;}
.pro hr{border-color:#1F9984;margin-top:30px;}

.white{color:#FCFCFC;}


@media only screen and (max-width:805px) {
	 .grid_1,.grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .contact_grid_4 {
		width:100%;
		margin: 10px 0 10px 0;
		float: none;
	}
	.skillsCircle{width:33%;}
}
@media only screen and (max-width:730px) {
	.avatar_image{width:100%;width:180px !important;height:180px;margin:15px auto !important}
}

@media only screen and (max-width:730px) {
	.avatarCont{display:none;}
	.topText{width:100%;}
}

@media only screen and (max-width:550px) {
  .main_container h3{font-size:25px;}
}
@media only screen and (max-width:470px) {
  .main_container h3{font-size:20px;}
	h1,h2,h3,h4,h5{text-align:center;}
	h5{font-size:23px;}
}
@media only screen and (max-width:400px) {
  .main_container h3{font-size:16px;}
	#topCont h2{font-size:25px;}
}