/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* Setup */
/* Variable */
/* line 9, ../sass/_setup.scss */
.button, .back-top, .link:hover, .text, .text:hover, .logo, .logo:hover, .logo :active, .logo :focus, #reset, #submit {
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

/* line 16, ../sass/_setup.scss */
.link:hover {
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

/* Reset */
/* line 3, ../sass/_reset.scss */
.button {
  padding: 10px 5px;
  background-color: #333333;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  border-bottom: 3px solid #bb112a;
}
/* line 13, ../sass/_reset.scss */
.button:hover {
  background-color: #999999;
  color: #ffffff;
  border-radius: 5px;
}

/* line 19, ../sass/_reset.scss */
.scale {
  max-width: 100%;
  display: block;
  margin-top: 5px;
  position: relative;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  /* This adds the border */
  padding: 2px;
  border-radius: 10px;
  background-color: #FFFFFF;
  -webkit-transform: scale(1);
  /*Webkit: Scale down image to 0.8x original size*/
  -moz-transform: scale(1);
  /*Mozilla scale version*/
  -o-transform: scale(1);
  /*Opera scale version*/
  -webkit-transition-duration: 0.5s;
  /*Webkit: Animation duration*/
  -moz-transition-duration: 0.5s;
  /*Mozilla duration version*/
  -o-transition-duration: 0.5s;
  /*Opera duration version*/
  opacity: 1;
  /*initial opacity of images*/
}

/* line 41, ../sass/_reset.scss */
.scale:hover {
  -webkit-transform: scale(1.1);
  /*Webkit: Scale up image to 1.2x original size*/
  -moz-transform: scale(1.1);
  /*Mozilla scale version*/
  -o-transform: scale(1.1);
  /*Opera scale version*/
  box-shadow: 0px 0px 30px gray;
  /*CSS3 shadow: 30px blurred shadow all around image*/
  -webkit-box-shadow: 0px 0px 30px gray;
  /*Safari shadow version*/
  -moz-box-shadow: 0px 0px 30px gray;
  /*Mozilla shadow version*/
  opacity: 0.8;
}

/* line 52, ../sass/_reset.scss */
.mainbg {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  top: 0px;
  left: 0px;
  background-position: 50% 50%;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Container */
/* line 68, ../sass/_reset.scss */
.container {
  margin: 50px auto;
}

/* line 71, ../sass/_reset.scss */
.me {
  width: 150px;
  height: 155px;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

/* line 80, ../sass/_reset.scss */
.likes {
  margin-right: 10px;
  text-align: center;
  text-decoration: none;
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
}

/* line 88, ../sass/_reset.scss */
iframe {
  border: none;
  overflow: hidden;
  width: 80px;
  height: 21px;
  border: none;
  background-color: transparent;
}

/* Start Footer Style */
/* line 98, ../sass/_reset.scss */
.clr {
  clear: both;
  height: 20px;
}

/* line 102, ../sass/_reset.scss */
.clearfloat {
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  clear: both;
  float: none;
  height: 0px;
  width: 0px;
  border: 0px none;
  line-height: 0px;
}

/* line 113, ../sass/_reset.scss */
footer {
  z-index: 100;
  height: 50px;
  text-align: right;
  color: #fff;
  bottom: 0;
  right: 0;
  left: 0;
}

/* End Footer Style */
/* line 125, ../sass/_reset.scss */
.back-top {
  width: 40px;
  height: 40px;
  margin: 0px auto;
  cursor: pointer;
  opacity: 0.3;
}
/* line 134, ../sass/_reset.scss */
.back-top:hover {
  opacity: 1;
}

/* line 139, ../sass/_reset.scss */
p {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 15px;
  text-align: justify;
  line-height: 1.5;
}

/* line 145, ../sass/_reset.scss */
h1, .a {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 1px #fff;
  line-height: 1.0em;
  cursor: default;
}

/* line 156, ../sass/_reset.scss */
h1, .b {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 20px;
  text-align: center;
  font-weight: lighter;
  line-height: .5em;
  color: #fff;
  text-shadow: 0px 0px 1px #fff;
}

/* line 165, ../sass/_reset.scss */
h1, .c {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 25px;
  text-align: center;
  font-weight: bold;
  color: #333;
  text-shadow: 0px 0px 1px #fff;
  line-height: 3.0em;
  cursor: default;
}

/* line 175, ../sass/_reset.scss */
h2 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 30px;
  color: #FFFFFF;
}

/* line 182, ../sass/_reset.scss */
h3 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 20px;
  padding-left: 10px;
  color: #FFFFFF;
}

/* line 190, ../sass/_reset.scss */
.vcard {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  font-weight: lighter;
}

/* line 196, ../sass/_reset.scss */
.social {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  -webkit-transform: scale(1);
  /*Webkit: Scale down image to 0.8x original size*/
  -moz-transform: scale(1);
  /*Mozilla scale version*/
  -o-transform: scale(1);
  /*Opera scale version*/
  -webkit-transition-duration: 0.5s;
  /*Webkit: Animation duration*/
  -moz-transition-duration: 0.5s;
  /*Mozilla duration version*/
  -o-transition-duration: 0.5s;
  /*Opera duration version*/
  opacity: 1;
  /*initial opacity of images*/
}
/* line 209, ../sass/_reset.scss */
.social:hover {
  -webkit-transform: scale(1.1);
  /*Webkit: Scale up image to 1.2x original size*/
  -moz-transform: scale(1.1);
  /*Mozilla scale version*/
  -o-transform: scale(1.1);
  /*Opera scale version*/
}

/*image link style*/
/* line 218, ../sass/_reset.scss */
.ilinks {
  max-width: 72%;
  margin: 0px auto;
}

/* line 222, ../sass/_reset.scss */
.link {
  max-width: 100%;
  display: block;
  margin-top: 5px;
  margin: 0px auto;
  margin-bottom: 20px;
  padding: 20px;
  float: left;
}

/* Main styles for Portfolio Nilanga Website */
/* line 2, ../sass/_main.scss */
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background: #ecf0f1;
  margin-top: -50px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* header Style */
/* line 16, ../sass/_main.scss */
header {
  width: 100%;
  height: 300px;
  background-color: #303538;
}

/* Header Text */
/* line 22, ../sass/_main.scss */
.text {
  font-size: 12px;
  color: #fff;
  width: 150px;
  height: 150px;
  border: 0;
  cursor: pointer;
  padding-left: 32px;
  line-height: 17.0;
  opacity: 0;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
}
/* line 36, ../sass/_main.scss */
.text:hover {
  opacity: 1;
  color: #fff;
}

/* Footer Style */
/* line 45, ../sass/_main.scss */
.subfooter {
  width: 100%;
  height: 200px;
  background-color: #303538;
  padding-top: 20px;
  margin-bottom: -20px;
}

/* Footer Text */
/* line 53, ../sass/_main.scss */
.center {
  text-align: center;
  text-decoration: none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 12px;
  color: #fff;
}

/* Logo Style */
/* line 62, ../sass/_main.scss */
.logo {
  background-image: url(../img/Nilanga.png);
  width: 70%;
  width: 150px;
  height: 150px;
  margin: 0px auto;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* line 74, ../sass/_main.scss */
.logo {
  width: 150px;
  height: 150px;
  border: 0;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2), inset 0 0 0 16px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
/* line 93, ../sass/_main.scss */
.logo:hover, .logo :active, .logo :focus {
  box-shadow: inset 0 0 0 110px rgba(0, 0, 0, 0.3), inset 0 0 0 16px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Containers */
/* line 106, ../sass/_main.scss */
.container-home {
  width: 75%;
  background-color: #fff;
  margin: 0px auto;
  margin-bottom: -90px;
  padding-top: 60px;
  padding-bottom: 100px;
}

/* line 115, ../sass/_main.scss */
.container1 {
  width: 75%;
  background-color: #fff;
  margin: 0px auto;
  margin-bottom: -90px;
  padding-top: 20px;
  padding-bottom: 150px;
}

/* line 124, ../sass/_main.scss */
.container2 {
  width: 80%;
  background-color: #fff;
  margin: 0px auto;
  margin-top: 50px;
  margin-bottom: 50px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #848484;
  font-size: 15px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 3px solid #C0C0C0;
  -moz-box-shadow: inset 10px 5px 50px #000000;
  -webkit-box-shadow: inset 10px 5px 50px #000000;
  box-shadow: inset 10px 5px 50px #000000;
}

/* line 142, ../sass/_main.scss */
.container3 {
  width: 95%;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #848484;
  font-size: 14px;
  margin: 0px auto;
}

/* Vedio Player */
/* line 151, ../sass/_main.scss */
video {
  width: 95%;
  max-width: 520px;
  max-height: 415px;
  margin: 0px auto;
  border: 2px solid #eaeaea;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 15px 30px -6px rgba(64, 50, 50, 0.93);
  -moz-box-shadow: 0px 15px 30px -6px rgba(64, 50, 50, 0.93);
  box-shadow: 0px 15px 30px -6px rgba(64, 50, 50, 0.93);
}

/* line 164, ../sass/_main.scss */
.container4 {
  position: relative;
  text-align: center;
}

/* -----------------------------------
Navigation
----------------------------------- */
/* line 5, ../sass/_responsive-nav.scss */
#nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  line-height: 1;
}

/* line 15, ../sass/_responsive-nav.scss */
#nav li {
  display: inline;
}

/* line 17, ../sass/_responsive-nav.scss */
#nav a {
  display: block;
  padding: .5em;
  font-size: 16px;
  color: #fff;
  background: #303538;
  border-bottom: 1px solid #fff;
  text-decoration: none;
  text-align: left;
}

/* line 29, ../sass/_responsive-nav.scss */
#nav-toggle {
  display: block;
  padding: .5em .5em .5em 40px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  background-color: #303538;
  background-image: url(../img/responsive-nav.png);
  background-repeat: no-repeat;
  background-position: 10px 50%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-decoration: none;
}

/* line 46, ../sass/_responsive-nav.scss */
#nav a:focus, #nav-toggle:focus {
  background-color: #8b959b;
  color: #fff;
}

/* line 47, ../sass/_responsive-nav.scss */
#nav a:hover, #nav-toggle:hover {
  background-color: #8b959b;
  color: #fff;
}

/* line 48, ../sass/_responsive-nav.scss */
#nav a:active, #nav-toggle:active {
  background-color: #8b959b;
  color: #fff;
}

/* -----------------------------------
Predefined
----------------------------------- */
/* line 55, ../sass/_responsive-nav.scss */
.js #nav {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

/* line 65, ../sass/_responsive-nav.scss */
#nav.opened {
  max-height: 9999px;
}

/* -----------------------------------
Navigation wide screen
----------------------------------- */
@media (min-width: 38em) {
  /* line 73, ../sass/_responsive-nav.scss */
  .js #nav {
    position: relative;
  }

  /* line 74, ../sass/_responsive-nav.scss */
  .js #nav.closed {
    max-height: none;
  }

  /* line 75, ../sass/_responsive-nav.scss */
  #nav-toggle {
    display: none;
  }

  /* line 77, ../sass/_responsive-nav.scss */
  #nav {
    border-top: #fff thin solid;
    position: relative;
    margin: 0px auto;
  }

  /* line 84, ../sass/_responsive-nav.scss */
  #nav a {
    border-bottom: 0;
    padding: 15px 30px;
    text-decoration: none;
    font-family: Arial, 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 100%;
    background: #303538;
    color: #8b959b;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }

  /* line 102, ../sass/_responsive-nav.scss */
  #nav ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 47px;
    background-color: #303538;
  }

  /* line 109, ../sass/_responsive-nav.scss */
  #nav li {
    padding: 0;
    list-style: none;
    display: inline-block;
  }
}
/*Form*/
/* line 2, ../sass/_form.scss */
fieldset {
  width: 250px;
  margin: 0 auto;
  border: 2px solid #bec0c0;
  background-color: #bec0c0;
}

/* line 8, ../sass/_form.scss */
input {
  height: 30px;
  width: 250px;
}

/* line 12, ../sass/_form.scss */
textarea {
  height: 100px;
  width: 250px;
  max-width: 250px;
}

/* line 17, ../sass/_form.scss */
#name, #phone, #email, #comment {
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

/* line 23, ../sass/_form.scss */
legend {
  font-family: "Arial Black", Gadget, sans-serif;
  color: #000;
}

/* line 27, ../sass/_form.scss */
#reset, #submit {
  background-color: #333333;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  border: 0;
  border-bottom: 3px solid #bb112a;
}
/* line 38, ../sass/_form.scss */
#reset:hover, #submit:hover {
  background-color: #999999;
  color: #ffffff;
  border-radius: 5px;
}

/* line 44, ../sass/_form.scss */
input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

/* line 55, ../sass/_form.scss */
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px #51cbee;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #51cbee;
}

/* line 61, ../sass/_form.scss */
::-webkit-input-placeholder {
  color: #333;
}

/* line 65, ../sass/_form.scss */
:-moz-placeholder {
  /* Firefox 18- */
  color: #333;
}

/* line 69, ../sass/_form.scss */
::-moz-placeholder {
  /* Firefox 19+ */
  color: #333;
}

/* line 73, ../sass/_form.scss */
:-ms-input-placeholder {
  color: #333;
}

/*Form*/
/* Responsive Page Styles */
@media only screen and (min-width: 1824px) {
  /* line 5, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 130px;
    padding-bottom: 130px;
  }

  /* line 9, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 100px;
    padding-bottom: 370px;
  }

  /* line 15, ../sass/_responsive-page.scss */
  .containerSubA {
    width: 50%;
    float: left;
  }

  /* line 19, ../sass/_responsive-page.scss */
  .containerSubB {
    width: 50%;
    float: left;
  }

  /* line 24, ../sass/_responsive-page.scss */
  .ilinks {
    max-width: 85%;
    margin: 0px auto;
  }

  /* line 28, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 33, ../sass/_responsive-page.scss */
  h2 {
    font-size: 30px;
  }

  /* line 37, ../sass/_responsive-page.scss */
  .container2 {
    width: 80%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 15px;
  }

  /* line 44, ../sass/_responsive-page.scss */
  h3 {
    font-size: 20px;
  }

  /* line 47, ../sass/_responsive-page.scss */
  .container3 {
    width: 95%;
    font-size: 15px;
    margin: 0px auto;
    padding-left: 10px;
  }

  /* line 53, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 57, ../sass/_responsive-page.scss */
  .social {
    width: 40px;
    height: 40px;
  }

  /* line 61, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1224px) {
  /* line 72, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 130px;
    padding-bottom: 130px;
  }

  /* line 76, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 100px;
    padding-bottom: 370px;
  }

  /* line 82, ../sass/_responsive-page.scss */
  .containerSubA {
    width: 50%;
    float: left;
  }

  /* line 86, ../sass/_responsive-page.scss */
  .containerSubB {
    width: 50%;
    float: left;
  }

  /* line 91, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 96, ../sass/_responsive-page.scss */
  h2 {
    font-size: 30px;
  }

  /* line 100, ../sass/_responsive-page.scss */
  .container2 {
    width: 80%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 15px;
  }

  /* line 107, ../sass/_responsive-page.scss */
  h3 {
    font-size: 20px;
  }

  /* line 110, ../sass/_responsive-page.scss */
  .container3 {
    width: 95%;
    font-size: 15px;
    margin: 0px auto;
    padding-left: 10px;
  }

  /* line 116, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 120, ../sass/_responsive-page.scss */
  .social {
    width: 40px;
    height: 40px;
  }

  /* line 124, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* line 136, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 130px;
    padding-bottom: 130px;
  }

  /* line 140, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 100px;
    padding-bottom: 370px;
  }

  /* line 146, ../sass/_responsive-page.scss */
  .containerSubA {
    width: 50%;
    float: left;
  }

  /* line 150, ../sass/_responsive-page.scss */
  .containerSubB {
    width: 50%;
    float: left;
  }

  /* line 155, ../sass/_responsive-page.scss */
  .container1 {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  /* line 162, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 167, ../sass/_responsive-page.scss */
  h2 {
    font-size: 50px;
  }

  /* line 171, ../sass/_responsive-page.scss */
  .container2 {
    width: 80%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 35px;
  }

  /* line 178, ../sass/_responsive-page.scss */
  h3 {
    font-size: 40px;
  }

  /* line 181, ../sass/_responsive-page.scss */
  .container3 {
    width: 95%;
    font-size: 35px;
    margin: 0px auto;
    padding-left: 10px;
  }

  /* line 187, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 191, ../sass/_responsive-page.scss */
  .likes {
    width: 40px;
    height: 40px;
  }

  /* line 195, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
  /*Form*/
  /* line 205, ../sass/_responsive-page.scss */
  fieldset {
    width: 250px;
    margin: 0 auto;
    margin-left: -30px;
    border: 2px solid #bec0c0;
    background-color: #bec0c0;
  }

  /* line 214, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 15px;
    padding-bottom: 20px;
  }

  /* line 218, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 20px;
    padding-bottom: 50px;
  }

  /* line 224, ../sass/_responsive-page.scss */
  .containerSubA {
    width: 100%;
    margin: 0px auto;
  }

  /* line 228, ../sass/_responsive-page.scss */
  .containerSubB {
    width: 100%;
    margin: 0px auto;
  }

  /* line 232, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* line 236, ../sass/_responsive-page.scss */
  .ilinks {
    max-width: 80%;
    margin: 0px auto;
  }

  /* line 240, ../sass/_responsive-page.scss */
  .container-home {
    width: 100%;
    margin: -50px auto;
    margin-bottom: -90px;
    padding-top: 50px;
  }

  /* line 246, ../sass/_responsive-page.scss */
  .container1 {
    width: 100%;
    margin: 0px auto;
    margin-bottom: -90px;
    padding-top: 10px;
    padding-bottom: 150px;
  }

  /* line 253, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 257, ../sass/_responsive-page.scss */
  .container2 {
    width: 95%;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  /* line 264, ../sass/_responsive-page.scss */
  h2 {
    font-size: 30px;
  }

  /* line 268, ../sass/_responsive-page.scss */
  h3 {
    font-size: 20px;
  }

  /* line 271, ../sass/_responsive-page.scss */
  .container3 {
    width: 100%;
    font-size: 15px;
    margin: 0px auto;
  }

  /* line 276, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 280, ../sass/_responsive-page.scss */
  .likes {
    width: 195px;
    height: auto;
    margin: 0px auto;
  }

  /* line 285, ../sass/_responsive-page.scss */
  .social {
    width: 40px;
    height: 40px;
  }

  /* line 290, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  /* iPhone only */
  /* line 303, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 15px;
    padding-bottom: 20px;
  }

  /* line 307, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 20px;
    padding-bottom: 50px;
  }

  /* line 313, ../sass/_responsive-page.scss */
  .containerSubA {
    width: 100%;
    margin: 0px auto;
    background-color: #bec0c0;
  }

  /* line 318, ../sass/_responsive-page.scss */
  .containerSubB {
    width: 100%;
    margin: 0px auto;
    background-color: #bec0c0;
  }

  /* line 323, ../sass/_responsive-page.scss */
  .container1 {
    width: 100%;
    margin: 0px auto;
    margin-bottom: -90px;
    padding-top: 10px;
    padding-bottom: 150px;
  }

  /* line 330, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 334, ../sass/_responsive-page.scss */
  .container2 {
    width: 95%;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  /* line 342, ../sass/_responsive-page.scss */
  h2 {
    font-size: 30px;
  }

  /* line 346, ../sass/_responsive-page.scss */
  h3 {
    font-size: 20px;
  }

  /* line 349, ../sass/_responsive-page.scss */
  .container3 {
    width: 95%;
    font-size: 15px;
    margin: 0px auto;
    padding-left: 10px;
  }

  /* line 355, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 359, ../sass/_responsive-page.scss */
  .likes {
    width: 100%;
    height: auto;
  }

  /* line 363, ../sass/_responsive-page.scss */
  .social {
    width: 40px;
    height: 40px;
  }

  /* line 368, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  /* line 380, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 15px;
    padding-bottom: 20px;
  }

  /* line 384, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 20px;
    padding-bottom: 50px;
  }

  /* line 390, ../sass/_responsive-page.scss */
  .container1 {
    width: 100%;
    margin: 0px auto;
    margin-bottom: -90px;
    padding-top: 10px;
    padding-bottom: 150px;
  }

  /* line 397, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 402, ../sass/_responsive-page.scss */
  .container2 {
    width: 95%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 15px;
  }

  /* line 409, ../sass/_responsive-page.scss */
  h2 {
    font-size: 30px;
  }

  /* line 413, ../sass/_responsive-page.scss */
  h3 {
    font-size: 20px;
  }

  /* line 416, ../sass/_responsive-page.scss */
  .container3 {
    width: 95%;
    font-size: 15px;
    margin: 0px auto;
    padding-left: 10px;
  }

  /* line 422, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 426, ../sass/_responsive-page.scss */
  .likes {
    width: 100%;
    height: auto;
  }

  /* line 430, ../sass/_responsive-page.scss */
  .social {
    width: 40px;
    height: 40px;
  }

  /* line 434, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  /* line 446, ../sass/_responsive-page.scss */
  .containerB {
    padding-top: 15px;
    padding-bottom: 20px;
  }

  /* line 450, ../sass/_responsive-page.scss */
  .containerPro2 {
    width: 75%;
    margin: 0px auto;
    padding-top: 20px;
    padding-bottom: 50px;
  }

  /* line 456, ../sass/_responsive-page.scss */
  .container1 {
    width: 100%;
    margin: 0px auto;
    margin-bottom: -90px;
    padding-top: 10px;
    padding-bottom: 150px;
  }

  /* line 463, ../sass/_responsive-page.scss */
  header {
    width: 100%;
    height: 300px;
  }

  /* line 468, ../sass/_responsive-page.scss */
  .container2 {
    width: 95%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 15px;
  }

  /* line 475, ../sass/_responsive-page.scss */
  h2 {
    font-size: 30px;
  }

  /* line 479, ../sass/_responsive-page.scss */
  h3 {
    font-size: 20px;
  }

  /* line 482, ../sass/_responsive-page.scss */
  .container3 {
    width: 95%;
    font-size: 15px;
    margin: 0px auto;
    padding-left: 10px;
  }

  /* line 488, ../sass/_responsive-page.scss */
  .me {
    width: 150px;
    height: 155px;
  }

  /* line 492, ../sass/_responsive-page.scss */
  .likes {
    width: 100%;
    height: auto;
  }

  /* line 496, ../sass/_responsive-page.scss */
  .social {
    width: 40px;
    height: 40px;
  }

  /* line 500, ../sass/_responsive-page.scss */
  .subfooter {
    width: 100%;
    height: 200px;
  }
}
/*-------------------------------------------------Code Separator--------------------------------------------------
------------------------------------------------------------------------------------------------------------------*/
/* line 5, ../sass/_skill.scss */
.skillbar-title {
  background: #2980b9;
}

/* line 8, ../sass/_skill.scss */
.skillbar-bar {
  background: #3498db;
}

/* line 13, ../sass/_skill.scss */
.skillbar {
  position: relative;
  display: block;
  margin-bottom: 15px;
  width: 100%;
  background: #ffffff;
  height: 25px;
  border-color: #333333;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
}

/* line 36, ../sass/_skill.scss */
.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  background: #6adcfa;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

/* line 53, ../sass/_skill.scss */
.skillbar-title span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 25px;
  line-height: 25px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

/* line 67, ../sass/_skill.scss */
.skillbar-bar {
  height: 25px;
  width: 0px;
  background: #6adcfa;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

/* line 76, ../sass/_skill.scss */
.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 11px;
  height: 25px;
  line-height: 25px;
  color: #ffffff;
  color: rgba(0, 0, 0, 0.4);
}

/* line 2, ../sass/_containers.scss */
.containerA {
  margin: 0px auto;
  background-color: #ecf0f1;
}

/* line 6, ../sass/_containers.scss */
.containerB {
  width: 75%;
  background-color: #ecf0f1;
  margin: 0px auto;
}

/* line 12, ../sass/_containers.scss */
.containerC {
  margin: 0px auto;
  background-color: #e2e2dd;
}

/* line 16, ../sass/_containers.scss */
.containerD {
  width: 75%;
  background-color: #e2e2dd;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

/* line 24, ../sass/_containers.scss */
.containerE {
  margin: 0px auto;
  background-color: #d1d3cd;
}

/* line 28, ../sass/_containers.scss */
.containerF {
  width: 75%;
  background-color: #d1d3cd;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

/* line 36, ../sass/_containers.scss */
.containerG {
  margin: 0px auto;
  background-color: #cacdcc;
}

/* line 40, ../sass/_containers.scss */
.containerH {
  width: 75%;
  background-color: #cacdcc;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

/* line 48, ../sass/_containers.scss */
.containerI {
  margin: 0px auto;
  background-color: #bec0c0;
}

/* line 52, ../sass/_containers.scss */
.containerJ {
  width: 75%;
  background-color: #bec0c0;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

/* line 62, ../sass/_containers.scss */
.containerPro1 {
  margin: 0px auto;
  background-color: #e2e2dd;
}

/* line 66, ../sass/_containers.scss */
.containerPro2 {
  background-color: #e2e2dd;
}

/* line 70, ../sass/_containers.scss */
.containerSubA {
  background-color: #e2e2dd;
}

/* line 73, ../sass/_containers.scss */
.containerSubB {
  background-color: #e2e2dd;
}
/* line 76, ../sass/_containers.scss */
.containerSubB p {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  text-align: left;
  line-height: 1.5;
  margin-top: -3px;
}

@media screen and (min-width: 300px) and (max-width: 980px) {
  /* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
  /* line 88, ../sass/_containers.scss */
  .containerPro2 {
    padding-top: 50px;
    padding-bottom: 20px;
  }
}
/* line 96, ../sass/_containers.scss */
.containerContactA {
  margin: 0px auto;
  background-color: #ecf0f1;
}

/* line 100, ../sass/_containers.scss */
.containerContactB {
  width: 75%;
  background-color: #ecf0f1;
  margin: 0px auto;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* line 108, ../sass/_containers.scss */
.containerContactC {
  margin: 0px auto;
  background-color: #bec0c0;
}

/* line 112, ../sass/_containers.scss */
.containerContactD {
  width: 75%;
  background-color: #bec0c0;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 30px;
}