@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");

.flexFooter {
    flex: 1;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}
    
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.rslides {
	display: block;
}

a.rslides_nav.rslides1_nav.prev,
a.rslides_nav.rslides1_nav.next {
	display: block;
}

img {
	margin: 0 auto;
}

.container-phone {
    position: fixed;
    top: 0;
    z-index: 998;
    width: 100%;
    height: auto;
    padding-top: 20px;
}

.banner {
    position: relative;
   top: 200;
}

.menustrip {
     position: absolute; 
     z-index: 8;
     width: 100%;
}

.buttonscenter {
     position: relative;
     margin-left: 13%;
     margin-right: 13%;
     width: 100%;
}


/****************** I NEED A LAWYER BUTTON ******************/
.action {
    text-align: center; 
    position: absolute; 
    top: -150px;
    font-family: "PT Serif", serif;
    font-size: 3.5rem;
    font-weight: 200;
    text-transform: uppercase;
}

.logo {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.services10 {
    background: #e7e7e7;
    padding: 20px 0;
    margin-top: -10px;
}
.services {
    background: #e7e7e7;
    padding: 20px;
    display: block;
    width: 100%;
}

.services90 {
    background: #e7e7e7;
    margin-top: -10px;
    padding: 20px;
    display: block;
    width: 100%;
}

.header {
    position: relative; 
    z-index: 66; 
    color: #fff;
    padding-top: 40px;
}

.zlhomeAnimate .zlhomeModule{
  transition: opacity .6s, transform .6s;
  transform: translateY(40px);
  opacity: 0;
}
.zlhomeAnimate .zlhomeModule{
  transition-delay: .2s;
}

.zlhomeAnimate.visible .zlhomeModule, .zlhomeAnimate2.visible .zlbuttom{
  transform: translateY(0);
  opacity: 1;
}


.qualifications {
    margin-top: -10px;
    font-family: 'Mukta', san-serif;
    font-size: 90%;
    color: #999;
}

.phonenumber {
    margin-top: -10px;
    font-family: 'Mukta', san-serif;
    font-size: 75%;
    color: #444;
}

.mukta {
    font-family: 'Mukta', san-serif;
}

.paddingTop {
    padding-top: 25px;
}


.top120 {
    padding-top: 100px;
}

.top150 {
    padding-top: 150px;
}

.spacer {
    padding: 0 0 400px 0;
}

.spacerBottom {
    padding-bottom: 200px;
}

.title {
    font-family: "PT Sans", san-serif;
    font-weight: 900;
    color: #007dc1;
    text-transform: uppercase;
    font-size: 85%;
    letter-spacing: 2px;
    line-height: 100%;
}

.subhead {
    font-family: "Mukta", san-serif;
    font-size: 100%;
    color: #8c979a;
    line-height: 50%;
    text-transform: uppercase;
}

.fas {
    padding: 0 5px;
}

.fab {
    padding: 0 5px;
}

.full {
    height: 100%;
    padding-bottom: 100px;

}

.speechtag {
    text-align: right;
    vertical-align: center;
    display: block;
}

.speechtag::before {
    content: '\f0d9';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 300%;
    color: #efefef;
}

.speechtag2 {
    text-align: center;
    display: none;
}

.speech {
    background-image: url("/application/themes/osc/images/maori.jpg");
    /*background: #efefef;*/
    border-radius: 12px;
    padding: 15px 50px;
}

.button {
    font-family: "Caladea", serif;
    font-size: 12px;
    text-transform: uppercase;
}

.pad10 {
    padding: 0 10px;
}

.fullwidth {
    width: 100%;
}

/******************************** BUTTON ******************************/
.myButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
    box-shadow: inset 0px 1px 0px 0px #54a3f7;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7', GradientType=0);
    background-color: #007dc1;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #124d77;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "PT Serif", serif;
    font-size: 105%;
    padding: 20px 40px 20px 40px;
    text-decoration: none;
    text-shadow: 0 1px 1px #333;
        height: 60px;
}

.myButton:visited {
    text-decoration: none;
    color: #fff;
}

.myButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
    background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1', GradientType=0);
    background-color: #0061a7;
    text-decoration: none;
    color: #fff;
}

.myButton:active {
    position: relative;
    top: 1px;
    text-decoration: none;
    color: #fff;
}

.mysmallButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
    box-shadow: inset 0px 1px 0px 0px #54a3f7;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7', GradientType=0);
    background-color: #007dc1;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #124d77;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "Grenze", serif;
    font-size: 1.3rem;
    line-height: .95;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px #333;
    height: 55px;
    width: 100%;
}

.mysmallButton:visited {
    text-decoration: none;
    color: #fff;
}

.mysmallButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
    background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1', GradientType=0);
    background-color: #0061a7;
    text-decoration: none;
    color: #fff;
}

.mysmallButton:active {
    position: relative;
    top: 1px;
    text-decoration: none;
    color: #fff;
}


a:hover i.fa-facebook {
    color: darkorange;
}

.col-md-1 a:link {
    color: #fff;
}

.col-md-2  a:link {
    color: #fff;
}

.col-md-1  a:hover {
    text-decoration: none;
}

.col-md-1  a:visited {
    color: #fff;
    text-decoration: none;
}

.col-md-2  a:hover {
    text-decoration: none;
}

.col-md-2  a:visited {
    color: #fff;
    text-decoration: none;
}


.top200 {
    padding-top: 200px;
}

.line-left {
    border-left: thin solid white;
}

/**************************** GRID ************************/
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


.footer-container {
    background-color: #999;
    color: #f6f6f6;
    width: 100%;
    text-align: center;
    font-family: "Mukta", san-serif;
    font-size: 80%;
    line-height: 115%;
    text-transform: uppercase;
    padding-bottom: 2px;
}

.footer {
    background-color: #ccc;
    color: #444;
    height: auto;
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
}

.footer-container p {
    margin-top: 10px;
    line-height: 200%;
    font-size: 80%;
    font-weight: 500;
}

.footer-container a:link {
    color: darkblue;
    text-decoration: none;
}

.footer-container a:visited {
    color: #ccc;
    text-decoration: none;
}

.footer-container a:hover {
    color: #000;
    text-decoration: underline;
}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

/********************** RESPONSIVE ******************/

@media screen and (max-width: 1200px) {
    .menu input~nav>ul>li>a {
        font-size: 150%;
    }
    
    .menu input+label {
        top: 10px;
        right: 20px;
    }
    
    .menu input:checked ~ nav {
		height: 600px;
		transition-delay: 0s;
		list-style-type: none;
    }
    
@media screen and (max-width: 1024px) {
    .buttonscenter {
     margin-left: 0;
     margin-right: 0;
    }

    .speechtag {
        display: none;
    }
    .speechtag2 {
        text-align: center;
        display: block;
        position: top;
        padding: 0;
    }
    .speechtag2::before {
        content: '\f0d7';
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 300%;
        color: #e7e7e7;
        line-height: 20%;
    }
    .banner {
        margin-top: 80px;
    }
    .logo {
        display: block;
        width: 75%;
        height: auto;
        padding: 5px 0 0 10px;
        margin: 0 0 0 10px;
    }
    
    .services90 {
        display: none;
    }
    
    .services120 {
        display: none;
    }
    
    .footer-container {
        background-color: #999;
        color: #f6f6f6;
        width: 100%;
        text-align: center;
        font-family: "PT Sans Caption", san-serif;
        font-size: 90%;
        line-height: 125%;
        position: relative;
        bottom: 0;
    }
    .fixed {
        padding: 0 0 0 0;
    }
    .services {
        background: #e5e5e5;
        padding: 10px 0 5px 0;
        letter-spacing: 2px;
        margin-top: -70px;
    }
    }
    
    @media screen and (max-width: 768px){
	.rslides {
	display: none;
	}
		
	a.rslides_nav.rslides1_nav.prev,
a.rslides_nav.rslides1_nav.next {
	display: none;
}
		
	.services90 {
    display: none;
}
		
    .cnt223 {
    width: 70%;
    height: 100%;
    margin: 100px auto;
    background: #f3f3f3;
    position: relative;
    z-index: 103;
    padding: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #000;
    border: thin solid #000;
}

    .cnt223 p{
    font-size: 1.5rem;
}
}