/*
Theme Name:     Theratio Child
Theme URI:      http://wpdemo.archiwp.com/theratio/
Description:    Make your modifications to [Parent Theme] in this child theme.
Author:         Oceanthemes
Author URI:     http://oceanthemes.net/
Version:        1.0
Template:       theratio
*/

@import url("../theratio/style.css");
 

a.octf-btn:not(.no-line):before, a.octf-btn:not(.no-line):after {
	background: #65C0B4 !important;
}

#octf-btn-cstm:not(.no-line)::before, #octf-btn-cstm:not(.no-line)::after,
#octf-btn-cstm-scroll:not(.no-line)::before, #octf-btn-cstm-scroll:not(.no-line)::after{
  content: "";
  position: absolute;
  background: #65C0B4;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;	
}
#octf-btn-cstm::after,
#octf-btn-cstm-scroll::after {
  width: 1px;
  height: calc( 100% + 2px );
  top: 10px;
  right: -6px;
}
#octf-btn-cstm::after {
	right:-2px;
}
#octf-btn-cstm:hover::after, #octf-btn-cstm:active::after, #octf-btn-cstm:focus::after,
#octf-btn-cstm-scroll:hover::after, #octf-btn-cstm-scroll:active::after, #octf-btn-cstm-scroll:focus::after{
  height: 0;
}

#octf-btn-cstm::before,
#octf-btn-cstm-scroll::before{
  width: calc( 100% + 2px );
  height: 1px;
  bottom: -6px;
  left: 10px;
}

#octf-btn-cstm:hover::before, #octf-btn-cstm:active::before, #octf-btn-cstm:focus::before,
#octf-btn-cstm-scroll:hover::before, #octf-btn-cstm-scroll:active::before, #octf-btn-cstm-scroll:focus::before {
  width: 0;
}
#octf-btn-cstm-scroll {
	position: relative;
}

@media  (max-width: 1024px) {
	.mobile-logo-custom .the-logo img {
		height: auto !important;
	}
}
@media  (max-width: 768px) {
	.mobile-logo-custom .the-logo img {
		height: auto !important;
	}
	.header-mobile section > div > div.elementor-column.elementor-col-66 {
		width: 66% !important;	
	}	
	.header-mobile section > div > div.elementor-column.elementor-col-33 {
		width: 33% !important;	
	}	
}



.cstm-ratio a.btn-details {
    color: #eb1777;
    border-color: #eb1777;
}

.cstm-ratio a.btn-details {
    color: #454545;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: #454545 !important;
    position: relative;
    margin: 1em;
    display: inline-block;
    padding: 0.5em 1em;
    transition: all 0.3s ease-in-out;
    text-align: center;
    font-weight: bold;
}

.cstm-ratio a.btn-details:before, .cstm-ratio a.btn-details:after {
    border-color: #454545 !important;
}

.cstm-ratio a.btn-details:hover:before, .cstm-ratio a.btn-details:hover:after {
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #fff;
}


.cstm-ratio a.btn-details:before {
	background:  transparent !important;
    top: -6px;
    left: -6px;
    border-width: 2px 0 0 2px;
    z-index: 5;
}
.cstm-ratio a.btn-details:after {
    bottom: -6px;
    right: -6px;
    border-width: 0 2px 2px 0;
}

.cstm-ratio a.btn-details:before, .cstm-ratio a.btn-details:after {
    content: '';
    display: block;
    position: absolute;
    border-color: #454545;
    box-sizing: border-box;
    border-style: solid;
    width: 1em;
    height: 1em;
    transition: all 0.3s ease-in-out;
}

.cstm-ratio a.btn-details:hover {
    color: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #65C0B4 !important;
}
.cstm-ratio a.btn-details:hover:before, .cstm-ratio a.btn-details:hover:after {
    border-color: #ffffff !important;
}
/* =Theme customization starts here
------------------------------------------------------- */