body {background-color:#3372af;}
main{display:block !important}

nav {background-color: #142E54}
nav .navbar-collapse,button{margin-left:15px}
nav img{max-height:80px}
.navbar-nav {padding-top:10px}
.nav-link {color: rgba(255,255,255,.9) !important}
.nav-link:hover {color: rgba(255,255,255,.5) !important}

#Times {background-color: #8bcbe9; padding: 5px; text-align: center; border-bottom: #142e54 solid 5px}
#Times div { padding:0 5px; margin: auto}

article{margin-top:10px !important}

section{
    margin:0 auto 15px auto; padding:15px;
    background-color:#d4ecf9;
    box-shadow:-6px 7px 5px 0 #142E54
}

.thumbnail{
    position: relative;
    overflow:hidden;
    margin:10px auto;
}
.thumbnail img{
    width:100%;
    height:50%;
}
.thumbnail .caption{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
	color:white;
	background-color: rgba(128,128,128,.4);
	transition: .3s ease;
}
.thumbnail .caption .text{
    margin:5%;
}
.thumbnail .caption:hover {
	background-color: rgba(128,128,128,.1)
}

#Line{width:3px; height:100px; background-color:white}

#Warning{border: 5px double red; padding:10px}

#Contact h5{margin-bottom: 15px}

#Guarantees{padding: 15px 10px 10px; border-radius:10px; border: 5px solid #142E54}

.rates{margin-bottom:15px !important; border-right:1px solid black; border-top:1px solid black; padding:0 15px}
.rates div p{margin: 0 auto; max-height:26px}
.rates .inform:first-child p{border-top:none}
.rates ul{margin: 10px auto; padding:0}
.rates div p, .rates ul li {
    background: rgb(230, 230, 230);
    background: rgba(230, 230, 230, 0.9);
    padding:0 5px;
    border:1px solid black}
.rates .inform:last-child p{border-bottom:none}
.rates ul li {font-weight:bolder; margin: 3px; padding: 0; list-style:none; width:120px; height:120px; display:inline-block; position: relative; vertical-align: top; text-align: center}
.rates ul li p {margin: 5px auto}
.rates ul li p:last-child {width: 100%; position: absolute; bottom: 0}
.rates .inform {margin:0 auto !important}

/* Process + Tabs */
.Process {
    margin: 0 auto 15px auto;
    padding: 0;
    background-color: #142e54;
    box-shadow: -6px 7px 5px 0 #142E54
}
.Process h3 {
    background-color: #d4ecf9;
    margin: 0 auto; padding: 10px 0;
}
.tabs {
    overflow: hidden;
    background-color: #d4ecf9;
}
.tabs button {
    float: left;
    color: rgb(200, 200, 200);
    background-color: #3372af;
    border: 1px solid #d4ecf9;
    border-bottom: none;
    border-radius: 15px;
    outline: none;
    cursor: pointer;
    margin: 0 0 10px;
    padding: 14px 16px;
    transition: 0.3s;
}

.tabs .active, .tabs button:hover { background-color: #142e54; color:white}

.tabcontent {
    display: none;
    min-height: 127px;
    width: 100%;
    padding: 6px 12px;
    background-color: #142e54;
    color: white;
    border: 1px solid #d4ecf9;
    padding: 0 12px;
    border-top: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.tabcontent div{float: left; padding: 10px; margin: 3% 0}
.tabcontent p{ float: right; margin: 1rem 0}

footer{border-top:15px solid #142E54; background-color:#8bcbe9; text-align:center}
footer h6{text-align:center; margin:5px auto}

.Social{text-align: center; margin:10px auto 0 !important}
.Social a{margin:0 !important; color:black}
.Social div{margin-top:10px;margin-bottom:10px}

/* Data recovery */
.recovery-background {
    background: url('../img/Background/Data-Wipe-Destruction.jpg') no-repeat center center fixed;
    -webkit-background-size: cover cover;
    -moz-background-size: cover cover;
    -o-background-size: cover cover;
    background-size: cover;
}
.phone-recovery-background {
    background: url('../img/Background/Phone-Repair.jpg') no-repeat center center fixed;
    -webkit-background-size: cover cover;
    -moz-background-size: cover cover;
    -o-background-size: cover cover;
    background-size: cover;
}

@media screen and (min-width:576px){/* sm */
    .Opening{display:block}
}
@media screen and (min-width:768px){/* md */

    #Process{max-height:700px; max-width:210px}

    #Guarantees h6{border-left:2px solid #142E54}
    #Guarantees h6:first-child{border-left:none}

    #Times div {border: white solid 2px; border-bottom: none; border-top: none}
    #Times div:first-child, #Times div:last-child { border: none }
}
@media screen and (min-width:992px){/* lg */

    #Thumbs{max-width:600px}
    
    #Process{position:fixed;
             right:0; top:105px}

    .MainLink{display:block}

    .About-Me #Headshot-Keypoints{max-width:300px}
    .About-Me #Headshot-Keypoints #Achieve{border-bottom: none; height:100%}
    .About-Me #img, .About-Me #Achieve{border-right: 20px solid #142E54}

    .Opening{margin-top:30px}

    .tabs button {
        border-radius: 15px 15px 0 0;
        margin: 0;
    }
}
@media screen and (min-width:1200px){/* xl */
    #Contact{max-width:660px}
    .rates .rate{max-width:430px}
}

/* other */
.float-l{float:left}
.float-r{float:right}

/* Fixes */
.row{margin:0}
.navbar{padding:8px 0}
.nopad{padding:0}