@import url('https://fonts.googleapis.com/css?family=Tinos');
@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css?family=Sumana:700');
@keyframes modal-video{from{opacity:0}to{opacity:1}}
@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}

/** Common elements to all pages ***********************************************************************************/

html {  
background-color: #ffffff;
font-size: 1vw;
overflow-x: hidden;
min-width: 315px;
}

body {
min-width: 315px;
}

a {
text-decoration: none;
color: #ffffff;
}

a.a_phone {
color: #003366;
}

p {
margin: 0vw 0vw 0vw 0vw;
}

.hd1 {
height: 16vw;
}

.sp_logo { /** The Steel Lawfirm, P.C. **/
background: -webkit-linear-gradient(#000000, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Sumana";
font-size: 4vw;
float: left;
clear: left;
margin: 0vw 0vw 0vw 0vw;
padding: 0vw 0vw 0vw 0vw;
text-shadow: 0vw 0vw 0vw #777777;
letter-spacing: 0.06vw;
}

div.div_logo {
float: left;
clear: left;
padding: 0vw 0vw 0vw 0vw;
}

section.sc_menu {
background: linear-gradient(#606060, #8c8c8c);
margin: 0vw -1vw 0vw -1vw;
padding: 0vw 1vw 0vw 1vw;
##height: 1vw;
height: 11vw;
}

div.div_menu {
font-size: 2.8vw;
width: 100%;
text-align: center;
margin: 2vw -1vw 0vw 0vw;
}

span.span1 {
margin: 0vw 3vw 0vw 0vw;
}

div.div_phone {
letter-spacing: 0vw;
float: right;
text-align: center;
width: 30vw;
color: #003366;
font-family: "Tinos";
font-size: 3.5vw;
padding: 3vw 0vw 0vw 0vw;
}

.menu1:hover  {
color: #000000;
}

div.divbodyhd {
margin: 3vw 0vw 3vw 0vw;
color: #404040;
font-family: "Tinos";
font-size: 6vw;
text-align: center;
}

section.sc_lower_banner {
background: linear-gradient(#606060, #8c8c8c);
margin: 0vw -1vw 0vw -1vw;
padding: 0vw 1vw 0vw 1vw;
height: 1vw;
}

div.div_lower_banner {
display: flex;
justify-content: space-between;
##width: 60vw;
color: #ffffff;
font-family: "Tinos";
font-size: 0.8vw;
float: right;
padding: 0.1vw 3vw 0vw 0vw;
}

footer.ft {
background-color: #404040;
margin: 0vw -1vw 0vw -1vw;
padding: 1vw 1vw 1vw 1vw;
width: 100%;
height: 10vw;
}

div.div_ft {
position: relative;
top: 1vw;
margin: 0vw 0vw 0vw 0vw;
color: #e6e6e6;
font-family: "Sumana";
font-size: 2vw;
text-align: center;
line-height: 2.5vw;
}

div.div_spacer {
height: 2vw;
}
   
/** For Glyphicons **/

.svg_env svg {
width:	2vw;
height: 2vw;
top: .2vw;
position: relative;
}

.svg_phone svg {
width:	2vw;
height:	2vw;
top: .2vw;
position: relative;
}

/** End Glyphicons **/
   
/** End common elements ********************************************************************************************/

/** Elements for Index page **/

div.bg_index {
background: url("images/law_09.jpg"); 
margin: 0vw -1vw 0vw -1vw;
padding: 0vw 2vw 0vw 0vw;
## max-width: 100vw;
width: 100%;
height: 35vw;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.div_so_index {
color: #e1e1e1;
font-family: "Tinos";
font-size: 1vw;
width: 35vw;
margin: 4vw 1vw 0vw 0vw;
padding: 1vw 1vw 1vw 1vw;
border: 2px solid #e6e6e6;
background: rgba(64, 64, 64, 0.4);
line-height: 6vw;
float: right;
clear: right;
}

p.p_so1 {
text-align: center;
font-size: 3.5vw;
padding: 0vw 0vw 0vw 0vw;
}

div.divbody_index {
width: 80%;
margin: 2vw auto 4vw;
color: #404040;
font-family: "Tinos";
font-size: 2.5vw;
text-align: justify;
}

div.divbodyhd_index {
width: 90%;
margin: 5vw auto 5vw;
color: #404040;
font-family: "Tinos";
font-size: 4vw;
text-align: center;
word-spacing: 0vw;
}

span.sp1 {
font-family: "Tinos";
font-size: 5vw;
}

.badge_section {
width: 90%;
margin: 2vw auto 3vw;
}

.badge_column {
text-align: center;
float: left;
width: 25%;
padding: 0vw 0vw 0vw 0vw;
}

.divbody_badges::after {
content: "";
clear: both;
display: table;
}

.avbadge {
width: 15vw;
padding: 2vw 0vw 0vw 0vw;
}

.elitebadge {
width: 15vw;
padding: 0vw 0vw 0vw 0vw;
}

.gacdlbadge {
width: 15vw;
padding: 0vw 0vw 0vw 0vw;
}

.slbadge {
width: 15vw;
padding: 2vw 0vw 0vw 0vw;
}

/** End elements for Index page **/

/** Elements for Contact Us page **/

div.bg_contact {
margin: 0vw 0vw 0vw 0vw;
padding: 0vw 2vw 0vw 0vw;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.divbody_contact {
width: 100%;
margin: 0vw 0vw 0vw -1vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
text-align: center;
column-count: 3;
column-gap: 3vw;
column-rule: 0vw solid #595959;
line-height: 3vw;
}

div.div_emailfrm {
width: 90%;
margin: 4vw auto 4vw;
color: #404040;
font-family: "Tinos";
font-size: 5vw;
text-align: center;
column-count: 1;
line-height: 5vw;
}

label.lb_contact {
width: 80%;
}

input.in_contact {
width: 80%;
padding: 1vw 0vw 0vw 0vw;
margin: 2vw 0vw 3vw 0vw;

font-size: 3vw;
}

div.div_emailbtn {
width: 60%;
margin: 2vw auto 2vw;
color: #404040;
font-family: "Tinos";
font-size: 1.3vw;
text-align: center;
column-count: 2;
column-gap: 2vw;
}

button.emailbtn {
width: 60%;
margin: 0vw 0vw 3vw 0vw;
color: #404040;
font-family: "Tinos";
font-size: 5vw;
}

textarea.txt_contact {
width: 80%;
height: 15vw;
resize: none;
padding: 1vw 0vw 0vw 0vw;
margin: 2vw 0vw 3vw 0vw;
border: solid 1px #bbbbbb;
}

div.div_emailhd {
margin: 6vw 0vw 6vw 0vw;
color: #404040;
font-family: "Tinos";
font-size: 4vw;
text-align: center;
}

.svg_contact_phone svg {
width:	5vw;
height:	5vw;
position: relative;
padding: 0vw 0vw 3vw 0vw;
}

.svg_contact_env svg {
width:	5vw;
height:	5vw;
position: relative;
padding: 0vw 0vw 3vw 0vw;
}

.svg_contact_pin svg {
width:	5vw;
height:	5vw;
position: relative;
padding: 0vw 0vw 3vw 0vw;
}

span.spanwhite {
color: #ffffff;
font-size: 3vw;
}

/** Elements for About Us page **/

div.photos_about {
text-align: center;
width: 80%;
margin: auto;
column-count: 1;
}

img.img_about {
margin-left: auto;
margin-right: auto;
width: 60%;
border-radius: 8px;
border: 1px solid #dddddd;
}

p.p_att_txt {
text-align: justify;
margin: 2vw 2vw 2vw 2vw;
font-size: 3vw;
line-height: 3vw;
}

p.p_name {
color: #404040;
font-family: "Tinos";
text-align: center;
font-size: 3vw;
margin: 0vw 0vw 1vw 0vw;
}

a.readmore {
font-family: "Tinos";
color: #000090;
font-size: 2vw;
}

/** End elements for About Us page **/

/** Elements for Representative Cases page **/

h2 {
font-size: 3vw;
}

div.rep_cases {
margin: auto;
width: 100%;
}

div.column {
float: left;
padding: 1vw;
margin: 1vw;
}

div.column.left {
width: 70%;
margin; 1vw;
}

div.column.right {
width: 20%;
}

div.div_so_representative {
color: white;
font-family: "Libre Baskerville", serif;
font-size: 3vw;
text-align: justify;
width: 18vw;
margin: 5vw 7vw 0vw 0vw;
padding: 1vw 1vw 1vw 1vw;
border: 2px solid #e6e6e6;
background: rgba(64, 64, 64, 0.4);
float: right;
clear: right;
} 

div.divbody_representative {
width: 100%;
margin: 2vw auto 2vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
text-align: justify;
column-count: 3;
column-gap: 1vw;
column-rule: 0.1vw solid #595959;
line-height: 3vw;
}

p.rep_types {
font-size: 4vw;
text-align: left;
font-family: "Tinos";
line-height: 6vw;
display: block;
}

span.case_title {
text-decoration: underline;
}

p.case_head {
font-size: 2.5vw;
color: #404040;
}

p.rep_cases {
font-size: 2.5vw;
color: #404040;
}

p.case_body {
}

a.atypes {
color: #404040;
}

span.btt {
font-size: 2vw;
}


/** End elements for Representative Case page **/

/** Elements for Media page **/

.med_column {
#background-color: yellow;
#float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 90%;
padding: 3vw;
text-align: justify;
}

div.divbody_mediav {
width: 90%;
margin: 2vw auto 4vw;
color: #404040;
font-family: "Tinos";
font-size: 2.5vw;
text-align: justify;
column-count: 1;
column-gap: 2vw;
column-rule: 0.1vw solid #595959;
line-height: 2.5vw;
}

div.divbody_mediap {
width: 90%;
margin: 2vw auto 4vw;
color: #404040;
font-family: "Tinos";
font-size: 2.5vw;
text-align: justify;
column-count: 1;
column-gap: 2vw;
column-rule: 0.1vw solid #595959;
line-height: 2.5vw;
}

img.print_art {
display: block;
margin-left: auto;
margin-right: auto;
width: 90%;
background: red;
}

input.vbutton {
#background-color: red;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;

}

img.vbuttonp {
#background-color: blue;
width: 120px;
height: 120px;
}

button.vbutton {
background-color: #404040;
width: 640px;
height: 4vw;
color: white;
}



/** End elements for Media page **/

/** Elements for Practice Areas page **/

div.bg_practice {
background: url("images/steel_photo_3.jpg"); 
margin: 0vw -1vw 0vw -1vw;
padding: 0vw 2vw 0vw 0vw;
width: 100%;
height: 35vw;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.div_so_practice {
color: white;
font-family: "Libre Baskerville", serif;
font-size: 3vw;
text-align: justify;
width: 18vw;
margin: 5vw 7vw 0vw 0vw;
padding: 1vw 1vw 1vw 1vw;
border: 2px solid #e6e6e6;
background: rgba(64, 64, 64, 0.4);
float: right;
clear: right;
}

div.divbody_practice {
width: 80%;
margin: 2vw auto 2vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
text-align: justify;
}

p.hb {
font-family: "Times New Roman";
font-size: 3vw;
text-align: left;
font-weight: bold;
}

p.hi {
font-family: "Times New Roman";
font-size: 3vw;
text-align: left;
font-weight: bold;
font-style: italic;
}

p.hind {
text-indent: 2vw;
}

p.pa1 {
font-family: "Times New Roman";
font-size: 3vw;
font-weight: bold;
}


/** End elements for Practice Areas page **/

/** Elements for Colette page **/

div.bg_colette {
background: url("images/test7.jpg"); 
margin: 0vw -1vw 0vw -1vw;
padding: 0vw 2vw 0vw 0vw;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.div_so_colette {
color: white;
font-family: "Libre Baskerville", serif;
font-size: 1.1vw;
text-align: justify;
width: 18vw;
margin: 5vw 7vw 0vw 0vw;
padding: 1vw 1vw 1vw 1vw;
border: 2px solid #e6e6e6;
background: rgba(64, 64, 64, 0.4);
float: right;
clear: right;
}

div.divbody_colette {
width: 80%;
margin: 2vw auto 2vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
text-align: left;
line-height: 3vw;
}

p.p_colette_txt {
text-align: left;
margin: 1vw 0vw 1vw 0vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
}

p.p_colette_txt_2 {
text-align: justify;
margin: 1vw 2vw 1vw 2vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
}

h1.colette_txt {
text-align: left;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
}

/** End elements for Colette page **/

/** Elements for Brian page **/

div.bg_brian {
background: url("images/test7.jpg"); 
margin: 0vw -1vw 0vw -1vw;
padding: 0vw 2vw 0vw 0vw;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.div_so_brian {
color: white;
font-family: "Libre Baskerville", serif;
font-size: 3vw;
text-align: justify;
width: 18vw;
margin: 5vw 7vw 0vw 0vw;
padding: 1vw 1vw 1vw 1vw;
border: 2px solid #e6e6e6;
background: rgba(64, 64, 64, 0.4);
float: right;
clear: right;
}

div.divbody_brian {
width: 80%;
margin: 2vw auto 2vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
text-align: justify;
line-height: 3vw;
}

p.p_brian_txt {
text-align: left;
margin: 1vw 0vw 1vw 0vw;
color: #404040;
font-family: "Tinos";
font-size: 3vw;
}

h1.brian_txt {
text-align: left;
color: #404040;
font-family: "Tinos";
font-size:3vw;
}

/** End elements for brian page **/

/** Modal Stuff **/

.modal-video {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
z-index:1000000;
cursor:pointer;
opacity:1;
animation-timing-function:ease-out;
animation-duration:.3s;
animation-name:modal-video;
-webkit-transition:opacity .3s ease-out;
-moz-transition:opacity .3s ease-out;
-ms-transition:opacity .3s ease-out;
-o-transition:opacity .3s ease-out;
transition:opacity .3s ease-out
}

.modal-video-close {
opacity:0
}

.modal-video-close .modal-video-movie-wrap {
-webkit-transform:translate(0, 100px);
-moz-transform:translate(0, 100px);
-ms-transform:translate(0, 100px);
-o-transform:translate(0, 100px);
transform:translate(0, 100px)
}

.modal-video-body {
max-width:90vw;
width:100%;
height:100%;
margin:0 auto;
display:table
}

.modal-video-inner {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%
}

.modal-video-movie-wrap {
width:100%;
height:0;
position:relative;
padding-bottom:56.25%;
background-color:#333;
animation-timing-function:ease-out;
animation-duration:.3s;
animation-name:modal-video-inner;
-webkit-transform:translate(0, 0);
-moz-transform:translate(0, 0);
-ms-transform:translate(0, 0);
-o-transform:translate(0, 0);
transform:translate(0, 0);
-webkit-transition:-webkit-transform .3s ease-out;
-moz-transition:-moz-transform .3s ease-out;
-ms-transition:-ms-transform .3s ease-out;
-o-transition:-o-transform .3s ease-out;
transition:transform .3s ease-out
}

.modal-video-movie-wrap iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}

.modal-video-close-btn {
position:absolute;
z-index:2;
top:-35px;
right:-35px;
display:inline-block;
width:35px;
height:35px;
overflow:hidden;
border:none;
background:transparent
}

.modal-video-close-btn:before {
transform:rotate(45deg)
}

.modal-video-close-btn:after {
transform:rotate(-45deg)
}

.modal-video-close-btn:before,.modal-video-close-btn:after {
content:'';
position:absolute;
height:6px;
width:100%;
top:50%;
left:0;
margin-top:-1px;
background:#fff;
border-radius:5px;
margin-top:-6px;
}