iris.css

@import url(//fonts.googleapis.com/css?family=Lato:400,900);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

html,body{
    margin: 0;
    padding: 0;
    height: 100%;

}
.container{
    overflow-x: hidden;
}
a{
    text-decoration: none;
}
a:hover{
text-decoration: none;
}


/* IRIS */

.about-iris{
    width: 100%;
    margin-top: 20px;
    max-width: 100%;
    font-family: Raleway;
    font-size: 1.3em;
    background-color: #eee;
}
.about-iris p {
    width: 80%;
    margin: 0 10% 20px 10%;
}
.letters{
    width: 70%;
    margin: 0 15% 0 15%;
}
.intro{
    width: 100%;
    max-width: 100%;
    margin: 10px 10% 10px 10%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    padding: 10px;
    font-size: 20rem;
}
.IRIS{
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Raleway;

}
.reg-button{
    position: absolute;
    top: 75vh;
    color: white;
}
.reg-button:hover{
    color: gray;
}



.intro span{
    cursor: pointer;
}
.inspire,.resonate,.integrate,.succeed{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  text-shadow: 10px 10px black;
}
@media (max-width:1000px)
{
    .intro{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;

    }
}


/* SPEAKERS */
.speakers{
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
    max-width: 100%;
    background-image: url(https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Raleway;
    overflow-x: hidden;
}
.sp{
    font-family: Raleway;
}
.main-footer{
    font-family: monospace;
    color: white;
    background-color: #2e2e2e;
    width: 100%;
    border: 1px solid green;
}

.soc{
    width: 30%;
    max-width: 100%;
    margin: 0 35% 0 35%;
    border: 1px solid white;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

@media(max-width:700px)
{
    .soc{
        width: 100%;

    }
}

.flip-box {
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.7);*/
    filter: alpha(opacity=50); /* For IE8 and earlier */
    padding: 20px;
    height: 511.98px;
    width: 100%;
    /*border: 2px solid black;*/
    background: #f4f4f4;
    background-color: transparent;
    perspective: 1000px;
  }
.flip-box:hover{
    cursor: pointer;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.flip-box-front {
/*background-color: #bbb;*/
cursor: pointer;
opacity: 1.0;
filter: alpha(opacity=100);
color: black;
}

.flip-box-back {
background-color: #555;
border: 2px solid black;
cursor: pointer;
opacity: 1.0;
filter: alpha(opacity=100);
color: white;
transform: rotateY(180deg);
backface-visibility: hidden;
}

/*Social Icon CSS*/

ul.social-network {
	list-style: none;
	display: inline;
	margin-left:0 !important;
	padding: 0;
}
ul.social-network li {
	display: inline;
	margin: 0 5px;
}

.social-network a.icoRss:hover {
	background-color: #F56505;
}
.social-network a.icoFacebook:hover {
	background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
	background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
	background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
	background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
	background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
	color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
	color:#44BCDD;
}

.social-circle li a {
	display:inline-block;
	position:relative;
	margin:0 auto 0 auto;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	text-align:center;
	width: 40px;
	height: 40px;
	font-size:20px;
	background-color: #D3D3D3;
}
.social-circle li i {
	margin:0;
	line-height:40px;
	text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-ms--transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.7s;
}
.social-circle i {
	color: #fff;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	-ms-transition: all 0.8s;
	transition: all 1s;
}