@charset "utf-8";
/* CSS Document */

html {
    overflow-y: scroll;
    /* Keeps page centered in all browsers regardless of content height */

    -webkit-text-size-adjust: 100%;
    /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
        -ms-text-size-adjust: 100%;
    /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

.footer {text-align: center; clear: both;}


#logo {
	padding: 1% 1% 1% 2%;
	margin: 1%;
	font-size: 	150%;
}

#nav {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 100%;
font-color: #27244f;
position: relative;
top: -50px;
float: right;
padding: 0% 5% 0% 0%;
}

ul.menu {margin:0px; padding:0px; list-style-type: none; height: 60px;}
li.menu_item {float: left; width: 120px; vertical-align:middle; text-align: center;}

ul.list {margin:0px; padding: 0% 0% 0% 10%; list-style-type: initial; list-style-position: inside;
 }
li.list_item {float: left; width: 100%; text-align: left; vertical-align: top;}

hr {
background color: #27244f;
width: 95%;
border: 1px solid #27244f;
position: relative;
top: -65px;
}
	.fakeHr {background-color: #27244f; width: 95%; height: 2px; margin: auto; position: relative; top: 20px;}
		.lineReg {background color: #27244f; width: 115%; height: 4px;}

.copyright {color: #ffffff; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; height: 20px;
	width: 20%;
	background-color: #27244f;
	border: 2px solid #27244f;
	position: relative;
	top: -75px;
	left: 40%;}
	
	.copyright2 {color: #27244f; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; height: 20px; position: relative; top: 25px;}

#label {
	height: 40px;
	width: 20%;
	background-color: #27244f;
	border: 2px solid #27244f;
	position: relative;
	top: -75px;
	left: 40%;
}

h3 {
	color: #ffffff;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 120%;
	font-weight: 700;
	position: relative;
	top: -10px;
}
a:link {
    color: #27244f;
	text-decoration: none;
}

a:hover {
    color: #a80b2c;
}

.red:hover {
    color: #a80b2c;
}

a:visited {
    color: #27244f;
}


h1 {
	font-size: 125%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #27244f;
}

#left {
	width: 30%;
	margin: 40px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	position: relative;
	left: 3%;
	display: inline;
	
}

#form {
	width: 30%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	clear: left;
}

p::first-line {
	font-size: 125%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #27244f;
}
	
p {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: #3F3E3E;
	padding: 0% 5% 0% 10%;
	}
	
p.right {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: #3F3E3E;
	padding: 0% 5% 0% 0%;
	}

p.bold {
	font-size: 100%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #27244f;
}

h4 {
	text-align: center;
	font-size: 125%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #27244f;
}

.column {float: left; width: 30%; padding: 0px 0px 0px 30px;}
.two-column {float: left; width: 40%; padding: 0 0 0 3%;}
.two-columnB {float: left; width: 40%; padding: 0 0 0 3%; height: 400px;}
.p_column {float: left; width: 30%;}
.p_column2 {float: left; width: 30%; padding: 0px 0px 0px 60px;}
.p_column3 {float: left; width: 30%;}
.spacer {float: left; width: 6%;}
.spacer2 {float: left; width: 4%;}
.center {text-align: center; width: 70%; margin-left: 15%;}	
.general {width: 95%;}
	
		
img.portfolio {border-style: solid; border-width: 2px; border-color: #27244f; display: block;}
img.border {border-style: solid; border-width: 2px; border-color: #27244f;}
.float_right {float: right; margin: 0 0 20px 20px;}

.portfolio-frame {
  height: 200px;
  width: 340px;
  margin-left: 10px;
  margin-top: 46px;    
  border-style: solid;
  border-width: 2px;
}

.portfolio-overflow-hidden {
  height: 200px;
  width: 340px;
}

.portfolio-overlay .back-overlay {
  display: none;
  width: 340px;
  height: 200px;
  position:inherit;
  background-color: #27244f;
opacity: .9;
  position:relative;
  top: -204px;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  line-height: 200px;
  font-size: 180%;
  font-weight: bold;
  color: #fff;
text-align: center;
}

.portfolio-frame:hover .back-overlay {
  display:block;
 }

/*.pbox:hover img.portfolio {opacity: .4;}

img.portfolio:hover {
    opacity: .4;
    filter: alpha(opacity=100); 
	background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;/* For IE8 and earlier 
}
.pbox {background: #27244f; width: 340px; height: 200px; display: inline-block;}

#box    {  width:300px;
           height:200px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}

#box1    { box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
		 background:url(http://samanthasuvak.com/test/img/portfolio/p_cawmics.jpg);
		 background-size: cover;
        border-radius:5px;
overflow:hidden;}


.overlay    {  background:rgba(53,50,95,.50);
               text-align:center;
               padding: 85px 0 100px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box:hover .overlay {
               opacity:1;}
	
	#box1:hover .overlay {
               opacity:1;}
			   		   
#plus       {  
position: relative;
top: -8px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:120%;}

*/

/*testing straight responsive*/
@media only screen and (min-width : 200px) and (max-width : 480px) {
    /**phone in portrait CSS rules here**/
    section {width: 100%; padding: 0 10px;}
    header #logo div {font-size: 100%; text-align: center; margin: 0 auto;}
    #nav {width: 85%; display:  text-align: center; font-size: 120%; line-height: 140%; clear: both; padding: 10% 0 0 0; margin-left: auto; margin-right: auto;}
	#logo {display: block; clear: both; margin: 0 auto;}
	img {width: 100%; clear: both; float: center; padding: 5%;}
	body {width: 90%; font-size: 110%}
	hr {background color: #27244f; width: 105%; border: 1px solid #27244f; position: relative; top: -45px; margin: auto;}
	.fakeHr {background-color: #27244f; width: 105%; height: 2px; margin: auto; position: relative; top: 20px;}
		.copyright2 {color: #27244f; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; height: 20px; position: relative; top: 25px; font-size: 80%;}
	
.column {float: left; width: 100%; margin: auto;}
#label {height: 40px; width: 60%; background-color: #27244f; border: 2px solid #27244f; position: relative; top: -47px; left: 22%;}
h3 {position: relative; top: -13px;}
p {padding: 0% 0% 5% 5%;}
p.bold::first-line {
	font-size: 90%;
}
.two-column {float: left; width: 90%; margin: auto;}
.p_column {float: left; width: 100%; padding: 15px;}
.p_column2 {float: left; width: 100%; padding: 0px 0px 0px 15px;}
.p_column3 {float: left; width: 100%; padding: 0px 0px 0px 15px;}
.general {width: 100%;}
.spacer {float: left; width: 0%;}
.portfolio-frame {
    width:  250px;
	height: 160px;
  margin-left: 0px;
  margin-top: 0px;    
  border-style: solid;
  border-width: 0px; 
}
.portfolio-overflow-hidden {
  width: 250px;
  height: 160px;
  position: relative;
  left: -5%;
  top: -2%;	
}
.portfolio-overlay .back-overlay {
  display: block;
  height: 160px;
  width: 250px;
  position:inherit;
  background-color: #27244f;
opacity: .75;
  position:relative;
  top: -170px;
  left: 5%;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 180%;
  font-weight: bold;
  color: #fff;
text-align: center;
}

.portfolio-frame:hover .back-overlay {
  display:none;
}
}

@media only screen and (min-width : 481px) and (max-width : 599px) {
    /**phone in landscape CSS rules here**/
    section {width: 100%; padding: 0 10px;}
    header #logo {font-size: 100%; text-align: center; margin: 0 auto;}
    #nav {width: 75%; font-size: 100%; clear: both; text-align: center; padding: 10% 0% 0% 20%; margin-left: auto; margin-right: auto;}
	#logo {display: block; clear: both; margin: 0 auto;}
	img {width: 90%; clear: both; float: center; padding: 5%;}
	body {width: 95%; font-size: 110%}
	hr {background color: #27244f; width: 105%; border: 1px solid #27244f; position: relative; top: -45px; margin: auto;}
	.fakeHr {background-color: #27244f; width: 105%; height: 2px; margin: auto; position: relative; top: 20px;}
		.copyright2 {color: #27244f; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; height: 20px; position: relative; top: 25px; font-size: 80%;}
	
.column {float: left; width: 100%; margin: auto;}
#label {height: 40px; width: 60%; background-color: #27244f; border: 2px solid #27244f; position: relative; top: -47px; left: 22%;}
.column {float: left; width: 40%;}
p {padding: 0% 0% 10% 10%;}
.two-column {float: left; width: 90%; margin: auto;}
.p_column {float: left; width: 100%; padding: 10px;}
.p_column2 {float: left; width: 100%; padding: 0px 0px 0px 10px;}
.p_column3 {float: left; width: 100%; padding: 0px 0px 0px 10px;}
.general {width: 100%;}
.spacer {float: left; width: 0%;}
.portfolio-frame {
    width:  300px;
  margin-left: 0px;
  margin-top: 0px;    
  border-style: solid;
  border-width: 2px;
}
.portfolio-overflow-hidden {
    width: 300px;
  height: 210px;
  position: relative;
  left: -5%;
  top: -2%;	
}
.portfolio-overlay .back-overlay {
  display: block;
  height: 200px;
  width: 300px;
  position:inherit;
  background-color: #27244f;
opacity: .75;
  position:relative;
  top: -205px;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 180%;
  font-weight: bold;
  color: #fff;
text-align: center;
}

.portfolio-frame:hover .back-overlay {
  display:none;
}
}

@media only screen and (min-width : 600px) and (max-width : 900px) {
    /**tablet Portrait CSS rules here**/
    section {width: 100%; padding: 0 10px;}
    header #logo {font-size: 100%; text-align: center; margin: 0 auto;}
    #nav { width: 100%; display: inline-block; font-size: 100%; clear: both; float: center; text-align: center; padding: 10% 0% 0% 20%;}
	#logo {display: block; clear: both; margin: 0 auto;}
	img {width: 90%; clear: both; float: center; text-align: center; margin: auto;}
	body {width: 95%; font-size: 110%}
		hr {background color: #27244f; width: 115%; border: 1px solid #27244f; position: relative; top: -45px; margin: auto;}
	.fakeHr {background-color: #27244f; width: 115%; height: 2px; margin: auto; position: relative; top: 20px;}
		.copyright2 {color: #27244f; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; height: 20px; position: relative; top: 25px; font-size: 80%; margin: auto;}
	
.column {float: left; width: 100%; margin: auto;}
#label {height: 40px; width: 60%; background-color: #27244f; border: 2px solid #27244f; position: relative; top: -47px; left: 30%;}
.column {float: left; width: 40%;}
h3 {position: relative; top: -13px;}
p {padding: 0% 0% 10% 10%; font-size: 110%;}
.two-column {float: left; width: 100%; text-align: center; margin: auto;}
.p_column {float: left; width: 80%; text-align: center; margin: auto;}
.p_column2 {float: left; width: 100%; padding: 0 0% 5% 5%;}
.p_column3 {float: left; width: 100%; padding: 0 0% 5% 5%;}
.general {width: 100%;}
.spacer {float: left; width: 0%;}
.portfolio-frame {
    width:  340px;
  margin-left: 0px;
  margin-top: 0px;    
  border-style: solid;
  border-width: 2px;
}
.portfolio-overflow-hidden {
    width: 360px;
  height: 230px;
  position: relative;
  left: -5%;
  top: 2%;
 
}
.portfolio-overlay .back-overlay {
  display: block;
  height: 200px;
  width: 342px;
  position:inherit;
  background-color: #27244f;
opacity: .75;
  position:relative;
  top: -200px;
  left: 4%;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 180%;
  font-weight: bold;
  color: #fff;
text-align: center;
}

.portfolio-frame:hover .back-overlay {
  display:none;
}
}

@media only screen and (min-width : 901px) and (max-width : 1200px) {
	  /**tablet Landscape CSS rules here**/
	
	.p_column {float: left; width: 40%; padding: 30px;}
	.p_column2 {float: left; width: 40%; padding: 0 0% 5% 5%;}
.p_column3 {float: left; width: 40%; padding: 0 0% 5% 5%;}
	
	  .spacer {float: left; width: 0%;}
.portfolio-frame {
    width:  340px;
  margin-left: 0px;
  margin-top: 0px;    
  border-style: solid;
  border-width: 2px;
}
.portfolio-overflow-hidden {
  width: 280px;
}
.portfolio-overlay .back-overlay {
  display: block;
  height: 200px;
  width: 340px;
  position:inherit;
  background-color: #27244f;
opacity: .75;
  position:relative;
  top: -205px;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 180%;
  font-weight: bold;
  color: #fff;
text-align: center;
}

.portfolio-frame:hover .back-overlay {
  display:none;
}
}

@-moz-document url-prefix() { 
  hr {
background color: #27244f;
width: 95%;
border: 1px solid #27244f;
position: relative;
top: -10px;
}

#label {
	height: 40px;
	width: 20%;
	background-color: #27244f;
	border: 2px solid #27244f;
	position: relative;
	top: -20px;
	left: 40%;
}
.column {width: 30%; padding: 0px 0px 0px 50px;}
}