body{
	width: 100%;
	max-width: 100%;
	background: rgb(51,145,198);
	margin-bottom: 0px;
	position: relative;
	font-size: 16px;
	overflow-x: hidden;
}
* {
	margin: 0;
	padding: 0;
}
/* <--------Google Fonts--------->
<-----Titles----->
font-family: 'Rubik', sans-serif;
font-family: 'Poppins', sans-serif;
<-----Paragraphs----->
font-family: 'Catamaran', sans-serif;
font-family: 'Nunito', sans-serif;
*/

/* <--------Fonts--------->*/
h1, h2, h3, h4{
	font-family: 'Poppins', sans-serif;
}
p, li, select{
	font-family: 'Nunito', sans-serif;
}

/* //////////Header////////*/
header{
	width: 100%;
	height: 50px;
	background-color: rgba(10,10,10,0.5);
	position: relative;
	z-index: 1001;
}

.logo{
	position: relative;
	width: 40px;
	left: 46vw;
	top: -30px;
}
.logo img{
	position: relative;
	width: 100%;
	z-index: 1000;
}
.english p, .spanish p{
	color: rgb(200,200,200);
	font-size: 8px;
	text-align: center;
	margin-top: 0px;
}
.english{
	position: absolute;
	width: 30px;
	left: 88vw;
	margin-top: -65px;
	z-index: 1000;
}
.english img{
	position: relative;
	width: 100%;
}
.spanish{
	position: absolute;
	width: 30px;
	left: 78vw;
	margin-top: -65px;
	z-index: 1000;
}
.spanish img{
	position: relative;
	width: 100%;
}
header nav .ioMenuMovil{
	background: none;
	height: 40px;
	width: 30px;
	cursor: pointer;
	line-height: 40px;
	margin: 0px 0px 0px 10px;
	padding-top: 5px;
}
header nav .ioMenuMovil img{
	width: 100%;
	position: relative;
	top: -2px;
}

header nav #card_menu{
	display: none;
	position: relative;
	width: 100vw;
	background: rgba(10,10,10,0.95);
	top: -72px;
	left: 0px;
	z-index: 999;
	height: 100vh;
	padding-bottom: 50px;
}

header nav #card_menu #logo_menu{
	height: 200px;
	width: 80%;
	margin: 30px 0px;
	margin: 30px 0px;
	margin-left: 10%;
	margin-bottom: 50px:
}

header nav #card_menu #logo_menu img{
	width: 100%;
}

header nav #card_menu ul{
    position: relative;
	display: block;
    margin-top: 40px;
    left: 5%;
}

header nav #card_menu ul li{
	list-style: none;
	font-size: 1em;
	line-height: 37px;
}

header nav #card_menu ul li a{
	text-decoration: none;
	color: white;
}
.rect{
	position: relative;
}

/*///////////////background//////*/
.background{
	position: relative;
	width: 100vw;
	height: 100vh;
	top: -70px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../img/surgery.png");
}

.holder{
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
}

.holder h1{
	position: relative;
	top: 40vh;
}
 .holder h2{
	position: relative;
 	opacity: 1 !important;
 	top: 40vh;
	max-width: 500px;
	font-size: 20px;
	margin: auto;
 }
 .scroll{
     visibility: hidden;
	 position: relative;
	 width: 10vw;
	 height: 50px;
	 top: -8vw;
	 background: none;
     margin: auto;
     color: white;
     text-align: center;
     z-index: 999999;
 }
 .scroll p{
     margin-bottom: -10px;
 }
 .scroll a{
     cursor: pointer;
     color: white;
     text-decoration: none;
 }
 /*--------Slideshow--------*/
.slideshow{
    position: relative;
    width: 90%;
    height: 500px;
    margin: auto;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(25, 25, 25, 0.25), 0 10px 10px rgba(25, 25, 25, 0.22);
    margin-bottom: 70px;
}
.carousel1, .carousel2, .carousel3{
    position: relative;
    height: 100%;
    width: 100%;
    background: blue;
    text-align: center;
    color: white;
    padding-top: 230px;
    padding-bottom: 230px;
    background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.carousel1{
    background-image: url('../img/photo2.jpg');
}
.carousel2{
    background-image: url('../img/photo4.jpg');
}
.carousel3{
    background-image: url('../img/photo6.jpg');
}
.slideshow_title{
    font-size: 30px;
}
 /*--------ABOUT--------*/
.about{
    position: relative;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;
}
.aboutText p{
    font-size: 15px;
}
.aboutImg div{
    position: relative;
    width: 70%;
    margin: auto;
    background-image: linear-gradient( 200deg,  rgba(17,106,197,1) 11.2%,  rgb(83, 198, 243) 91.1% );
    border-radius: 25px;
    padding-top: 30px;
}
.aboutImg img{
    position: relative;
    width: 100%;
    margin: auto;
    border-radius: 25px;
    left: 5%;
    box-shadow: 5px 5px 5px 5px rgba(25, 25, 25, 0.25), 0 10px 10px rgba(25, 25, 25, 0.22);
}
 /*--------Estudios--------*/
.estudios_logo{
    text-align: center;
    padding-top: 50px;
}
.estudios_logo img{
    position: relative;
    width: 50%;
}
/*---------laparoscopia-------*/
.lapa_background{
    position: relative;
	width: 100vw;
	height: 40vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    background-image: url("../img/photo6.jpg");
    color: white;
}
.content{
	position: relative;
	top: 9vw;
	width: 50vw;
	left: 25vw;
	background: none;
	text-align: center;
}
.content h2{
	margin-bottom: 0px;
}
.content h2, .content2 h2{
	font-size: 2em;
}
.content span{
	font-size: 40px;
}
.content img{
	position: relative;
	width: 15%;
	margin: auto;
}

.lapa_info{
    padding: 50px 5% 50px 5%;
    color: white;
}
.lapa_info h2{
    margin-bottom: 30px;
}
.lapa_info p{
    text-align: justify;
}
.card_deck{
    text-align: center;
}
.card{
    border-radius: 25px;
    background: none;
}
/*---------Cirugías-------*/
.cirugias{
    position: relative;
	width: 100vw;
	height: 40vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    background-image: url("../img/photo 1.png");
    color: white;
}
.content2{
	position: relative;
	top: 9vw;
	width: 50vw;
	left: 25vw;
	background: none;
	text-align: center;
}
.content2 h2{
	margin-bottom: 0px;
}
.content2 h2, .content2 h2{
	font-size: 2em;
}
.content2 span{
	font-size: 40px;
}
.content2 img{
	position: relative;
	width: 15%;
	margin: auto;
}
.cirugias_info{
    position: relative;
    width: 100%;
    background: rgb(240,240,240);
    padding: 30px;
    padding-top: 50px;
    text-align: center;
}
.card_deck_cirugias{
    margin-bottom: 50px;
    text-align: center;
}
.cirugia_card{
    border-radius: 25px;
    color: white;
    background-color: rgb(18, 12, 99);
    /* background-image: url('../img/surgery3.jpg');
	background-position: center;
	background-repeat: no-repeat;
    background-size: cover; */
    padding: 0px;
    overflow: hidden;
    margin-bottom: 30px;
}
.card_body{
    background: rgba(10,10,10,0.7);
}
.cirugia_button{
    padding: 10px 50px 10px 50px;
    border-radius: 25px;

}
.surgeryParagraph{
	visibility: hidden;
}
/*---------Extra Info-------*/
.nutricion{
	background-color: rgb(51,145,198);
	color: rgb(240,240,240);
	padding: 20px 10% 100px 10%;
}
.pBefore{
	position: relative;
	text-align: center !important;
	top: -120px;
    font-size: 19px;
    margin-bottom: -30px;
}
.circle, .square{
    position: relative;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 30px;
	width: 200px;
	line-height: 200px;
    text-align: center;
	font-size: 32px;
}
.circle{
	border-radius: 50%;
	border: 7px solid rgb(240,240,240);
}
.obesidad{
	position: relative;
	background-color: rgb(240,240,240);
	color: rgb(51,145,198);
	padding: 20px 10% 100px 10%;
}
.square{
	border: 7px solid rgb(1,145,198);
}
.obesidad div{
    text-align: center;
}
.obesidad button{
	position: relative;
	margin: auto;
	padding: 10px 40px 10px 40px;
	border-radius: 30px;
	background: rgb(51,145,198);
	border: 2px solid rgb(240,240,240);
    margin-bottom: 30px;
}
.obesidad button a{
	color: white;
	text-decoration: none;
}
.modal_button{
    position: relative;
    margin: auto;
    margin-bottom: 30px;
	padding: 10px 40px 10px 40px;
	border-radius: 30px;
	background: rgb(51,145,198) !important;
    border: 2px solid rgb(240,240,240);
    box-shadow: none;
}
.nutricion{
    text-align: center;
}
.nutricion p, .obesidad p{
    text-align: justify;
}

/*<-----Nutricion modal-------->*/
.modal{
	color: rgba(10,10,10,0.7);
}

/* //////////Testimonials///////////*/
.testimonials{
	position: relative;
	width: 100%;
	color: black;
	background: rgb(220,220,220);
	padding: 50px 10% 50px 10%;
	text-align: center;
}
.testimonials h3{
	font-size: 30px;
	margin-bottom: 5px;
}
.testimonials svg{
	margin-bottom: 40px;
}
.testimonyHolder{
	position: relative;
	width: 100%;
	background: none;
}
.testimonyHolder img{
	position: relative;
	width: 40%;
	margin: auto;
	margin-bottom: 25px;
	border-radius: 50%;
}
.testimonyHolder h4{
	color: rgb(100,100,100);
}

/* //////////Contacto///////////*/
.contacto{
    position: relative;
    width: 100%;
    padding: 50px 5% 50px 5%;
    background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('../img/fondo_contact.png');
}
.contacto h3{
    text-align: center;
    color: white;
    margin-bottom: 50px;
    font-size: 40px;
}
form{
    background: rgba(250,250,250,0.1);
    border-radius: 25px;
    padding: 30px;
    margin-bottom: 30px;
}
input, select, textarea{
    position: relative;
    width: 90%;
    left: 5%;
    border-radius: 25px;
    padding: 8px;
    border: none;
}
.mapa{
    margin-bottom: 30px;
}
.mapa_iframe{
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 25px;
}
.contacto_info{
    color: white;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}
.contacto_info h5{
    font-size: 35px;
}
.contacto_info i{
    margin-right: 10px;
}
.contacto_info p{
    margin-bottom: 5px;
}
.redes_sociales{
    text-align: center;
    color: white;
    margin-bottom: 30px;
}
.redes_sociales a{
    color: white;
    text-decoration: none;
    margin-right: 15px;
}
.copy_right{
    color: white;
    text-align: center;
}
.goback{
    position: fixed;
    z-index: 99999999;
    top: 90vh;
    left: 90vw;
}
.goback a{
    color: white;
    text-decoration: none;
}
.goback i{
    text-shadow: 5px 5px 5px 5px rgba(25, 25, 25, 0.25), 0 10px 10px rgba(25, 25, 25, 0.22);
}


@media screen and (min-width: 768px){
	/* //////////Header///////////*/

	.logo{
		top: 10px;
		left: 5%;
	}
	header nav #showMenu,
	header nav #hideMenu{
		display: none;
	}
	header nav #card_menu figure{
		display: none;
	}

	header nav{
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		position: relative;
	}
	.rect{
		display: none;
	}
	header nav #card_menu{
		display: inline-block;
		border: none;
		background: none;
		position: relative;
		top: -20px;
		width: 100%;
		text-align: center;
		padding-bottom: 0px;

	}
	header nav #card_menu ul{
		padding: 0px;
		margin: 0px;
        margin-top: -5px;
        left: 0%;
	}
	header nav #card_menu ul li{
		display: inline-block;
		text-align: center;
		font-size: 1em;
        margin: 0px;
        margin-right: 15px;
	}
	header nav #card_menu ul li a{
		color: white;
	}
	.spanish, .english{
		margin-top: -27px;
	}
	.spanish{
		left: 82vw;
	}
	#card_menu{
		display: show !important;
    }
    /*----Contact hover effects-----*/
    header nav #card_menu ul li a:hover{
        color: rgba(17,106,197,1);
    }
    .spanish img, .english img{
        transition: ease-in 1s;
    }
    .spanish img:hover{
        transform: rotateZ(360deg);
    }
    .english img:hover{
        transform: rotateZ(360deg);
    }
    /*-----Slideshow------*/
    .slideshow_title{
        font-size: 50px !important;
    }
    /*-----laparoscopia------*/
    .lapa_info{
        padding: 50px 15% 50px 15%;
    }
}
@media screen and (min-width: 992px){
    /*----------Background------------*/
    .background{
		background-attachment: fixed;
		top: -90px;
	}
	.holder h1{
		font-size: 60px;
    }
    .scroll{
        visibility: visible;
    }
    .scroll i{
        transition: ease-in-out 0.5s;
    }
    .scroll a:hover i{
        transform: translateY(5px);
    }
    /*-----Slideshow------*/
    .slideshow_title{
        font-size: 60px !important;
    }
    /*-----Laparoscopia------*/
    .lapa_background{
		background-attachment: fixed;
		height: 70vh;
	}
    .content h2{
		font-size: 80px;
		text-shadow: 2px 2px black;
    }
    .lapa_info{
        padding: 50px 20% 50px 20%;
    }
    .lapa_info p{
        font-size: 18px;
    }
    /*-----Cirguias------*/
    .cirugias{
		background-attachment: fixed;
		height: 70vh;
	}
    .content2 h2{
		font-size: 80px;
		text-shadow: 2px 2px black;
    }
    .cirugias_info{
        padding-left: 10%;
        padding-right: 10%;
    }
    .cirugia_card{
        margin-right: 20px;
        margin-left: 20px;
        background-image: url('../img/surgery3.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .card_body{
        padding: 50px 30px 50px 30px;
    }
    .cirugia_card_alone{
        width: 90%;
        margin: auto;
    }
    .surgeryParagraph{
        visibility: hidden;
        transition: 1s ease;
		transition-delay: .1s;
    }
    .cirugia_card h4{
        position: relative;
        top: 70px;
    }
    .cirugia_card h4{
        transition: ease-in-out 1s;
    }
    .cirugia_card:hover h4{
        top: 0px;
    }
    /*.cirugia_card:hover p{
        visibility: visible;
    }*/
    /*---------Extra Info-------*/
    .nutricion{
		background-color: rgb(240,240,240);
		color: rgb(51,145,198);
		transition: 1s ease;
    }
    .pBefore{
        transition: 1s ease;
    }
    .nutricion, .obesidad{
        padding-top: 150px;
        padding-bottom: 150px;
    }
    .circle{
        border-radius: 0%;
		border: 7px solid rgb(51,145,198);
		transition: 1s ease;
	}
    .obesidad:hover{
		background-color: rgb(51,145,198);
		color: rgb(240,240,240);
		transition: 0.5s ease;
	}
	.obesidad:hover > .square{
		border-radius: 50%;
		text-align: center;
		font-size: 32px;
		border: 7px solid rgb(240,240,240);
		transition: 1s ease;
	}

	.nutricion:hover{
		background-color: rgb(51,145,198);
		color: rgb(240,240,240);
		transition: 0.5s ease;
	}
	.nutricion:hover > .circle{
		border-radius: 50%;
		text-align: center;
		font-size: 32px;
		border: 7px solid rgb(240,240,240);
		transition: 1s ease;
    }
    .modal_button, .obesidad button{
        transition: ease-in-out 0.5s;
    }
    .modal_button:hover{
        border-color: white;
        box-shadow: 0 5px 5px rgba(25, 25, 25, 0.25), 0 10px 10px rgba(25, 25, 25, 0.22);
    }
    .obesidad button:hover{
        box-shadow: 0 5px 5px rgba(25, 25, 25, 0.25), 0 10px 10px rgba(25, 25, 25, 0.22);
    }
    /*-----Testimony------*/
    .testimonyHolder{
		width: 500px;
		margin: auto;
    }
    /*-----Contacto------*/
    .submit{
        transition: ease-in-out 0.5s;
    }
    .submit:hover{
        background: rgb(18, 12, 99);
        color: white;
    }
    .redes_sociales i{
        transition: ease-in-out 0.5s;
    }
    .redes_sociales a:hover i{
        transform: translateY(-7px);
    }
    /*-----Go back button------*/
    .goback{
        transition: ease-in-out 0.5s;
    }
    .goback:hover{
        transform: translateY(-10px);
    }
}